Angular JS - 请求以获取图像

Posted 2023-02-27

【中文标题】Angular JS - 请求以获取图像

【英文标题】：Angular JS - request in order to get an image

【发布时间】：2013-05-22 11:03:46

【问题描述】：

我想在 UI 上显示 jpeg 图像。为此，我请求我的服务（GET 方法），然后我转换为 base 64：

$http( 
    url: "...",
    method: "GET",
    headers: 'Content-Type': 'image/jpeg'             
).then(function(dataImage)
    var binary = '';
    var responseText = dataImage.data;
    var responseTextLen = dataImage.data.length;
    for (var j = 0; j < responseTextLen; j+=1) 
         binary += String.fromCharCode(responseText.charCodeAt(j) & 0xff)
    
    base64Image = 'data:image/jpeg;base64,' + window.btoa(binary);
);  

最后，我的浏览器告诉我图像已损坏或被截断。 所以我尝试使用 overrideMimeType('text / plain; charset = x-user-defined') 创建一个 XMLHttpRequest 并且它有效：

var xhr_object = new XMLHttpRequest();
xhr_object.overrideMimeType('text/plain; charset=x-user-defined');
xhr_object.open('GET', '...', false);
xhr_object.send(null);
if(xhr_object.status == 200)
    var responseText = xhr_object.responseText;
    var responseTextLen = responseText.length;
    var binary = ''
    for (var j = 0; j < responseTextLen; j+=1) 
        binary += String.fromCharCode(responseText.charCodeAt(j) & 0xff)
       
    base64Image = 'data:image/jpeg;base64,' + window.btoa(binary);

有什么区别？

【参考方案1】：

现在 AngularJS 尊重 XHR (XMLHttpRequest) 标准，您可以使用普通的 Angular JS $http 与 html FileReader 结合使用。

诀窍是将数据作为 blob 传递给阅读器。

var url = 'http://'; // enter url here
$http.get(url,responseType: "blob").
    success(function(data, status, headers, config) 
        // encode data to base 64 url
        fr = new FileReader();
        fr.onload = function()
            // this variable holds your base64 image data URI (string)
            // use readAsBinary() or readAsBinaryString() below to obtain other data types
            console.log( fr.result );
        ;
        fr.readAsDataURL(data);
    ).
    error(function(data, status, headers, config) 
        alert("The url could not be loaded...\n (network error? non-valid url? server offline? etc?)");
    );

【讨论】：

我仍然收到data does not implement interface Blob 错误，即使是responseType: "blob"。

浏览器检查器说什么？您的客户端是否阻止了任何网络请求？

这个终于解决了我的问题。不需要处理普通的旧 XHR 和 btoa() 转换的东西。

【参考方案2】：

我知道这不是一个答案，所以我不确定它是否值得发布。这与您正在做的事情相似，但方向相反！但这里是：

我将一个图像数据字符串从画布元素 (canvas.toDataURL("image/png")) 发布到服务器 (node + express)，将其保存为服务器上的 png，然后将该图像作为第三方 API 的 URL。

这是我在 angular.js 控制器中的原始 XMLHttpRequest：

var dataURL = encodeURIComponent(canvas.toDataURL("image/png"));
var url = "/camera/" + name + "/";

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = response;
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("image=" + dataURL);

这里转换成angular.js $http服务：

var dataURL = encodeURIComponent(canvas.toDataURL("image/png"));
var url = "/camera/" + name + "/";

var config = 
  method: 'POST',
  url: url,
  data: $.param( image: dataURL ),
  headers: 'Content-Type': 'application/x-www-form-urlencoded'
;

$http(config);

将图像保存在服务器上的express函数：

app.post('/camera/:username', function (req) 
  var username = req.params.username,
    image = decodeURIComponent(req.body.image),
    binaryData;

  var base64Data = image.replace(/^data:image\/png;base64,/, "");
  base64Data += base64Data.replace('+', ' ');
  binaryData = new Buffer(base64Data, 'base64').toString('binary');

  fs.writeFile("public/camera-images/" + username + ".png", binaryData, "binary");
);