如何从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

返回的图像位于binary encoding中，而不是Base64中。

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

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

btoa

Mozilla的

<img ng-src="data:image/JPEG;base64,{{myImage}}"> a涵盖了XHR请求和图像，并将其直接读取到This guide中。它应该是一个很好的起点。

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

Answer 2

这些方法似乎都不完整，这是一个完整的解决方案：

UInt8Array

然后我就可以直接使用它：

UInt8Array

将arraybuffer转换为base64的函数直接取自

  $http({
    method: 'GET',
    url: imageUrl,
    responseType: 'arraybuffer'
  }).then(function(response) {
    console.log(response);
    var str = _arrayBufferToBase64(response.data);
    console.log(str);
    // str is base64 encoded.
  }, function(response) {
    console.error('error in getting static img.');
  });


  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);
  }

Answer 3

以防万一有人需要它。

[在我的情况下，由于各种变压器和其他我们喜欢的东西，我不得不通过angular的<img data-ng-src="data:image/png;base64,{{img}}"> 服务发送请求。

因此基于前面提到的ArrayBuffer to base64 encoded string，我想出了以下解决方案：

$http

基本思想是设置基础XHR请求的Mozilla's guide属性，并将二进制内容转换为数据URL。

Answer 4

通过

let getImageDataURL = (url, imageType = 'image/jpeg') => {
  return $http.get(url, {responseType: 'arraybuffer'}).then((res) => {
    let blob = new Blob([res.data], {type: imageType});
    return (window.URL || window.webkitURL).createObjectURL(blob);
  });
};

，您可以使用“ blob”作为responseType，并使用FileReader非常整洁地获取数据URL。

responseType

您可以这样引用：

https://stackoverflow.com/a/43032560/418819