如何在 Angular JS 中显示作为字节数组接收的图像

Question

我有一个服务器端应用程序可以 return 图片。这些是响应 headers:

Content-Disposition: attachment; filename=8822a009-944e-43f4-999b-d297198d302a;1.0_low-res
Content-Length: 502343
Content-Type: image/png
Date: Mon, 03 Aug 2015 19:13:39 GMT
Server: Apache-Coyote/1.1

在angular中，我需要显示图像。获取图像时，我使用 angularJS $http 调用服务器并将结果放入范围，但我从未达到 $http 的成功功能。正常执行来自邮递员 returns 图像的调用。我很好奇如何让 Angular 显示图像。

我是这样显示图片的：

<img ng-src={{image}} />

这是从服务器获取图像的调用：

$http.get(url, {responseType: "arraybuffer"})
    .success(function(data) {
        $scope.image= data;
    }
)

Answer 1

我认为你应该使用 then 回调，在 angular documentation 他们说 success 回调已经已弃用。
您的 img 在 data 响应中属性.

经过这些考虑，你可以尝试这样的事情。

$http.get(url, {responseType: "arraybuffer"} ).then(function(response) { 
$scope.image= response.data; });

Answer 2

我同意 Bellu 的回应，您应该对从 $http.get 返回的承诺使用 .then 函数，而不是 .success 函数。但是，我认为您的 ng-src 引用仍然存在问题，因为您没有为它提供 URL，而是对字节数组的引用。

要将您的 ng-src 引用绑定到客户端内存中的字节数组，您的绑定应采用以下形式：

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

编辑

由于我从未明确提及，上面的 ng-src 绑定假设您的图像数据是 base64 格式。 HarrisonA 在下面提供了一个方法来转换数组，如果它不是 base64 格式的话。

Answer 3

只是想添加到 jdmcnair 回答和 Loshmeey 的评论：

下面是我用来将数组缓冲区转换为 base 64 字符串的函数的 link。

ArrayBuffer to base64 encoded string

函数：

function _arrayBufferToBase64( 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 );
}

我在我的 angular 控制器中使用了这个函数，然后将结果（使用 $scope 变量）传递到我的 html 文件中的 img 元素。

如何在 Angular JS 中显示作为字节数组接收的图像

How to display Image received as byte array in Angular JS

javascript

image

bytearray

httpresponse

angularjs