如何从AngularJS中的$ http.get返回图像

Question

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

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

在我的服务中，我通过直接将url传递给图像本身来获取图像：

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

所有调用都成功，并且response.data似乎保存在以下图像中：

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




��C

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

虽然我不确定它是否确实可以，因为我无法显示它。我已经尝试过（在index.html内部）

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

有想法吗？是否可以从$ http.get返回实际图像并将其响应转换回图像（jpeg等）

谢谢！

Answer 1

返回的图像采用二进制编码，而不是Base64。

可以理解的是，<img>标签不支持从二进制到属性的采购，因此您必须考虑另一种解决方案。

您可以尝试使用TypedArrays和btoa函数在客户端将二进制编码转换为Base64 。这样您就可以使用

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

Mozilla的本指南涵盖了对XHR请求和图像的要求，并将其直接读入UInt8Array。它应该是一个很好的起点。

它是为普通的旧Javascript编写的，但是如果您只是在学习绳索，将其翻译为Angular应该是一个不错的练习。