• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Angular JS – 请求以获取图像

http 来源:Julien METZMEYER 4次浏览

我想在UI上显示一个jpeg图像。对于这一点,我请求我的服务(GET方法),然后我转换到基座64:Angular JS – 请求以获取图像

$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一个XMLHttpRequest( ‘text/plain的;字符集= X-用户自定义’),它的工作原理:

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

的区别是什么?

===========解决方案如下:

我知道这不是一个答案,所以我不知道它是否值得张贴。它与你所做的相似,但方向相反!但这里有:

我从画布元素(canvas.toDataURL(“image/png”))发布图像数据字符串到服务器(节点+快递),将其保存为服务器上的PNG,然后将该图像作为第三方API的网址提供。

这里是原来的XMLHttpRequest我在angular.js控制器:

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

快递功能保存图像在服务器上:

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

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)