Angular JS - 请求以获取图像

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

现在AngularJS尊重XHR（XMLHttpRequest）标准您可以使用普通角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?)"); 
    });

以上是 Angular JS - 请求以获取图像 的全部内容， 来源链接： utcz.com/qa/262118.html

回到顶部