Javascript 从缓冲区转换到基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 

当我试着用角度来阅读时，它不起作用，而且它显示出相同的效果

我决定使用这个函数将其转换为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);
    }


  }

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

然后在我的前端页面中，我是这样做的：

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);
    }


  }

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

当我试着这样读我的图像时：

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

它告诉我它是二进制的

但它仍然不起作用

---

有谁能帮助我阅读来自我的mongodb和我的节点api的图像吗？请检查您的浏览器是否支持数据URL。大多数浏览器的当前版本都是这样做的，但官方HTML标准afaik中没有

另一个问题是您需要另一个属性，而不是ng src。看

---

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

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

另一个问题是您需要另一个属性，而不是ng src。看

---

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

将

响应类型设置为
'blob'
：

 var config = { responseType: 'blob' };

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

将
响应类型设置为
'blob'
：

 var config = { responseType: 'blob' };

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


更新。。
事实上，我一直在尝试，直到找到了这个解决方案：

首先，我发现我必须将传输到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);
}

在这里，我用角度来表示视图：

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



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


        </li>




而且它在更新后仍然有效。。
事实上，我一直在尝试，直到找到了这个解决方案：

首先，我发现我必须将传输到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);
}

在这里，我用角度来表示视图：

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



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


        </li>




而且它能起作用