如何从$ http.get在AngularJS回图像 [英] How to return image from $http.get in AngularJS

问题描述

在我的控制器中我调用返回的承诺服务

In my controller I call a service that returns a promise

var onComplete = function(data) {
               $scope.myImage = data;           
            };

在我的服务，我打个电话直接通过URL到图像本身获取图像：

In my service I make a call to get the image by passing url directly to the image itself:

   return $http.get("http://someurl.com/someimagepath")
         .then(function(response){          
          return response.data;
         });

所有呼叫成功和response.data出现内部的图像中，持股待：

All the calls are succeeding and the response.data appears to be holding in an image inside:

����JFIF��;CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 90
��C




��C      

����"�� 
���}!1AQa"q2���#B��R��$

虽然我不知道，如果它实际上是因为我有显示它的麻烦。我试过（里面的index.html）

although I'm not sure if it actually does because I'm having trouble displaying it. I've tried (inside index.html)

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

想法？
是否有可能从$ http.get返回一个实际的图像，并转换其响应回的图像（JPEG等）

Ideas? Is it possible to return an actual image from $http.get and convert its response back to image (jpeg, etc.)

谢谢！

推荐答案

图片说的回来是在的二进制编码，而不是Base64编码。

The image that's coming back is in binary encoding, rather than Base64.

可以理解，＆LT; IMG方式＆gt; 标签不支持二进制采购通过属性，所以你必须看看另一种解决方案

Understandably, <img> tags don't support sourcing from binary through attributes, so you'll have to look at another solution.

您可以尝试使用在客户端的二进制编码转换为Base64 TypedArrays与的href=\"https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/btoa\" rel=\"nofollow\"> <为code> BTOA 功能。然后，你可以使用

You could try converting the binary encoding to Base64 at the client side using TypedArrays together with the btoa function. Then you'd be able to use

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

<一个href=\"https://developer.mozilla.org/en-US/docs/Web/API/XMLHtt$p$pquest/Sending_and_Receiving_Binary_Data\"相对=nofollow>这个指南一个由Mozilla涵盖作出XHR请求和形象，直接读取它变成的 UInt8Array 。这应该是一个很好的起点。

This guide a by Mozilla covers making an XHR request for and image and reading it directly into a UInt8Array. It should be a good starting place.

这对普通的旧的Javascript编写的，但它翻译成角应该是一个很好的锻炼，如果你只是学习的绳索。

It's written for plain old Javascript, but translating it to Angular should be a good exercise if you are just learning the ropes.

这篇关于如何从$ http.get在AngularJS回图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！