Http Angular JS-请求以获取图像

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

$http（{
网址：“…”，
方法：“获取”，
标题：{'Content-Type'：'image/jpeg'}
}).then（函数（dataImage）{
var二进制=“”；
var responseText=dataImage.data；
var responseTextLen=dataImage.data.length；
对于（var j=0；j

最后，我的浏览器告诉我图像已损坏或被截断。 因此，我尝试使用OverrideMetype（'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);
}

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\u object.responseText；
var responseTextLen=responseText.length；
变量二进制=“”
对于（var j=0；j

---

有什么区别？

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

我正在将一个图像数据字符串从canvas元素（canvas.toDataURL（“image/png”））发布到服务器（node+express），在服务器上将其保存为png，然后将该图像作为URL提供给第三方API

下面是我在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");
});

---

现在AngularJS尊重XHR（XMLHttpRequest）标准，您可以将普通AngularJS与HTML结合使用

诀窍是将数据作为一个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?)");
    });

---

我仍然收到一个

数据未实现接口Blob

错误，即使是

{responseType:“Blob”}

。浏览器检查器怎么说？您的客户端是否阻止了任何网络请求？这一个终于解决了我的问题。不需要处理普通的旧XHR和btoa（）转换的事情。