从缓冲区转换为 base 64 以使用角度读取答案

【问题标题】：Convert from buffer to base 64 to read using angular从缓冲区转换为 base 64 以使用角度读取
【发布时间】：2017-03-01 22:14:42
【问题描述】：

您好，我有一个使用 MEAN 堆栈的应用程序。我从获取图像的终点开始。图像数组值看起来像：

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

当我尝试使用 Angular 阅读时，它不起作用并且显示相同。

我决定使用这个函数将其转换为 base 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 的图像

【问题讨论】：

标签： javascript angularjs node.js mongodb base64

【解决方案1】：

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

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

您还可以尝试通过将 base64 数据写入 HTML 输出来“调试”它，并创建您自己的带有标签的 .html 文件以检查您的 base64 img 数据中是否存在问题。

【讨论】：

【解决方案2】：

将responseType 设置为'blob'：

 var config = { responseType: 'blob' };

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

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

【讨论】：

【解决方案3】：

更新.. 其实我一直在尝试，直到找到这个解决方案：

首先我发现我必须将传输到 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 循环来遍历 result，然后使用我的 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

【讨论】：