Javascript 如何在 Angular JS 中显示作为字节数组接收的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31795234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display Image received as byte array in Angular JS
提问by Loshmeey
I have a server side application that will return an image. These are the response 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
In angular, I need to display the image. When getting the image, I use the angularJS $httpto call the server and put the result in scope, but I never reach the success function of $http. Executing this call from postman returns the image normally. I'm curious to how to get Angular to display the image.
在角度中，我需要显示图像。获取图片时，我使用angularJS$http调用服务器并将结果放入scope中，但是一直没有达到$http. 从邮递员执行此调用会正常返回图像。我很好奇如何让 Angular 显示图像。
This is how I display the image:
这是我显示图像的方式：
<img ng-src={{image}} />
Here is the call to get the image from the server:
这是从服务器获取图像的调用：
$http.get(url, {responseType: "arraybuffer"})
.success(function(data) {
$scope.image= data;
}
)
回答by jdmcnair
I agree with Bellu's response in that you should be using the .thenfunction, rather than the .successfunction on the promise returned from the $http.get. However, I'd imagine you'll still have an issue with your ng-srcreference in that you are not supplying it with a URL, but instead a reference to your byte array.
我同意 Bellu 的回应，因为您应该使用该.then函数，而不是.success从$http.get. 但是，我ng-src认为您的引用仍然存在问题，因为您没有为其提供 URL，而是提供对字节数组的引用。
To bind your ng-srcreference to a byte array held in memory on the client, your binding should take the following form:
要将您的ng-src引用绑定到客户端内存中保存的字节数组，您的绑定应采用以下形式：
<img ng-src="data:image/JPEG;base64,{{image}}">
Edit
编辑
Since I never mentioned it explicitly, the ng-srcbinding above assumes that your image data is in base64 format. HarrisonA provided a method below to convert the array if it isn't already in base64 format.
由于我从未明确提及它，因此ng-src上面的绑定假定您的图像数据是 base64 格式。如果数组不是 base64 格式，HarrisonA 在下面提供了一种方法来转换数组。
回答by HarrisonA
Just wanted to add to jdmcnair answer and Loshmeey's comment:
只是想添加到 jdmcnair 的回答和 Loshmeey 的评论中：
Below is a link to the function that I used to convert the array buffer into a base 64 string.
下面是我用来将数组缓冲区转换为 base 64 字符串的函数的链接。
ArrayBuffer to base64 encoded string
The function:
功能：
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 );
}
I used this function in my angular controller and then passed the result (using a $scope variable) to the img element in my html file.
我在我的 angular 控制器中使用了这个函数，然后将结果（使用 $scope 变量）传递给我的 html 文件中的 img 元素。
回答by Bellu
- I think that you should use thencallback, in the angular documentationthey say that the successcallback has been deprecated.
- Your img is in the dataresponse property.
- 我认为您应该使用then回调，在角度 文档中，他们说成功回调已被弃用。
- 您的 img 位于数据响应属性中。
After these considerations, you could try something like this.
经过这些考虑，您可以尝试这样的事情。
$http.get(url, {responseType: "arraybuffer"} ).then(function(response) {
$scope.image= response.data; });
