Question

您好我有一个使用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

当我尝试使用角度读取时它不起作用并显示相同。

我决定使用此功能将其转换为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的图像

Answer 1

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

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

您也可以尝试＆＃34;调试＆＃34;这可以通过将base64数据写入HTML输出，并使用标记创建自己的.html文件，以检查base64 img数据中是否存在问题。

Answer 2

将responseType设置为'blob'：

 var config = { responseType: 'blob' };

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

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

Answer 3

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循环中的变量，然后我使用angular调用它。

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

从缓冲区转换为base 64以使用angular

3 个答案: