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

Posted 2023-02-23

【中文标题】如何在 AngularJS 中从 $http.get 返回图像

【英文标题】：How to return image from $http.get in AngularJS

【发布时间】：2015-06-29 01:59:18

【问题描述】：

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

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 等）

谢谢！

【问题讨论】：

根据我尝试将图像注入标签以减少对我正在制作的单页 Angular 应用程序的 HTTP 请求的实验，不，这是不可能的。

这里的最终目标是什么？如果你知道http://someurl.com/someimagepath，为什么还需要通过$http.get() 下载它，然后将其注入src 标签中，而您可以跳过中间人，只需将路径放在src 标签中？跨度>

@Tom - 这只是一个异步检索一些数据的测试，我想用它检索图像。除了学习 AngularJS 没有真正的最终目标

你能检查一下这个问题吗，我也有类似的问题：***.com/questions/47161442/…

这个答案实际上对我有用***.com/a/33125433/4631539

【参考方案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

【讨论】：

这篇文章的场景与我的情况非常吻合。我喜欢这个解决方案的潜力，但不幸的是不喜欢通过 Angular 的 $http 服务传回的二进制数据（字节数组）的结构或格式。 Uint8Array 在尝试创建字节数组时返回空。一旦我发现差异，我会发布我的解决方案。

你拯救了我的一天..!!谢谢你。 @paradite 我可以知道如何检索图像列表并显示

工作！！谁给这家伙一枚勋章！！对于未来的读者，$http 中的responseType: 'arraybuffer' 很重要，请不要错过。我试图在没有它的情况下完成它，但做不到。没有这个 _arrayBufferToBase64 似乎返回空字符串。

【参考方案2】：

以防万一有人需要。

在我的例子中，我不得不通过 angular 的 $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。

【参考方案3】：

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

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

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

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

This guide Mozilla 的 a 涵盖了对图像发出 XHR 请求并将其直接读入UInt8Array。这应该是一个很好的起点。

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

【讨论】：

谢谢，它看起来确实像一个二进制字符串。我去看看指南！

@ra170 如果你能解决这个问题，你能发布代码吗？

@Tometoyou 通过谷歌搜索 arraybuffer to base64 找到了解决方案：***.com/questions/6965107/…

你能检查一下这个问题吗，我也有类似的问题：***.com/questions/47161442/…

【参考方案4】：

通过https://***.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">