从缓冲区转换为基址64使用角度阅读

你好，我有一个应用程序使用MEAN堆栈。我从我的终点获取图像。图像阵列值看起来像：从缓冲区转换为基址64使用角度阅读

8,8,7,7,9,8,9,8,9,8,9,9,8,8,8,8,7,9,7,7,9,10,16,13,8,8,16,9,7,8,12,33,14,15,1

当我尝试使用的角度这是行不通的阅读，它表现出同样的。

我决定使用这个函数将它转换为64位，这样我就可以读取它。

所以在我的控制，我写这样的：

export class MainController { 

    constructor($http) { 
    'ngInject'; 

    this.$http = $http; 
    this.getMessages(); 
    this.getImages(); 
    this.arrayBufferToBase64 = function(buffer) { 
     var binary = ''; 
     var bytes = new Uint8Array(buffer); 
     var len = bytes.byteLength; 
     for (var i = 0; i < len; i++) { 
     binary += String.fromCharCode(bytes[i]); 
     } 
     return window.btoa(binary); 
    } 


    }

，这是我的函数：

getImages() { 



    var vm = this; 
    this.$http.get('http://localhost:5000/api/photo').then(function(result) { 

     vm.images = result.data; 
     console.log(result.data); 

    }); 
    }

然后在我的前端角页我做这样的：

<img ng-src="data:image/png;base64,{{arrayBufferToBase64(image.img.data.data)}}" alt="" />

当我尝试读取像这样的图像。：

<img ng-src="{{image.img.data.data)}}" alt="" />

它给我的错误，这是二进制

但随后仍然没有工作

任何人可以帮助我如何可以读取该图片来自我的MongoDB的到来，我的节点API

来源

2017-03-01 Hesham El Masry

请检查您的浏览器是否支持数据url。大多数浏览器的当前版本都这样做，但它不在官方的HTML标准afaik中。

另一个问题是你需要另一个属性，而不是ng-src。见Loading image src using a variable containing base64 data in AngularJS

，你也可以尝试“调试”这写的的base64数据到HTML输出，并创建一个标签自己的.html文件，以检查是否有您的base64 IMG数据中的一个问题。

来源

2017-03-01 22:27:09

设置responseType到'blob'：

var config = { responseType: 'blob' }; 

$http.get(url, config).then(function (response) { 
    $scope.imageBlob = response.data; 
});

<img ng-src="{{imageBlob}}">

来源

2017-03-02 10:12:46 georgeawg

UPDATE .. 其实我一直在尝试和努力，直到我发现这个解决方案：

首先我发现我必须分配将其转换为base64到我的视图模型的功能：

vm.arrayBufferToBase64 = function(buffer) { 

    console.log(buffer); 
    var binary = ''; 
    var bytes = new Uint8Array(buffer); 
    var len = bytes.byteLength; 
    for (var i = 0; i < len; i++) { 
    binary += String.fromCharCode(bytes[i]); 
    } 
    return window.btoa(binary); 
}

，然后后，我打电话给我的API，它为我的图像我必须做出一个foreach循环遍历结果迭代，然后用我的arrayBufferToBase64函数将结果转换，然后分配到变量中forEach循环，然后我使用角度来调用它。

this.$http.get('http://localhost:5000/api/photo').then(function(result) { 


    result.data.forEach(
    function(x) { 
     x.img.base64 = vm.arrayBufferToBase64(x.img.data.data); 

    });

，然后在这里我叫它为视图采用了棱角分明：

<li class="list-group-item" ng-repeat="image in main.images"> 



      <img data-ng-src="data:image/jpeg;base64,{{image.img.base64}}" /> 


     </li>

和它的作品Taraaaa

来源

2017-03-02 21:19:27

从缓冲区转换为基址64使用角度阅读

回答

相关问题