Question

在我的控制器中，我调用一个返回promise的服务

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

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

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

然后我可以直接使用它：

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

将 arraybuffer 转换为 base64 的功能直接取自ArrayBuffer to base64 encoded string

Answer 2

万一有人需要它。

在我的情况下，我必须通过有角度的$http服务发送请求，因为各种变形金刚和我们用它做的其他奇特的东西。

因此，基于前面提到的Mozilla's guide，我提出了以下解决方案：

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

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

Answer 3

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

可以理解，<img>标签不支持从二进制到属性的来源，因此您必须查看其他解决方案。

您可以尝试使用TypedArrays和btoa函数将二进制编码转换为客户端的Base64。然后你就可以使用

了

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

Mozilla的

This guide a涵盖了制作XHR请求并将其直接映射到UInt8Array。它应该是一个很好的起点。

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

Answer 4

通过https://stackoverflow.com/a/43032560/418819，您可以使用“ blob”作为responseType，并使用FileReader整齐地获取数据URL。

$http.get( url, { responseType: "blob" } ).then((result) => {
  var reader = new FileReader();
  reader.readAsDataURL( result.data );
  reader.onload = function (e) {
    return e.target.result;
  };
});

您可以像这样引用它：

<img data-ng-src="{{img}}">

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

4 个答案: