Angular JS - 画像を取得するためのリクエスト

Question

UIにjpeg画像を表示したいと思います。このために、私は私のサービス（GETメソッド）を要求し、私は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を使用してのXMLHttpRequestを作成してみました（ 'text/plainの;のcharset = 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); 
} 

違いは何ですか？

Answer 1

私はこれが答えではないので、投稿する価値があるかどうかはわかりません。それはあなたがやっていることに似ていますが、反対方向です！しかし、ここに行く：

キャンバス要素（canvas.toDataURL（ "image/png"））からサーバ（node + express）に画像データ文字列を送り、サーバ上のpngとして保存しています。その画像を第三者のAPIへのURLとして提供します。画像を保存する

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

特急機能：それはangular.js $ HTTPサービスに変換され、ここで

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コントローラに持っていた元のXMLHttpRequestですサーバー上の：

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

Answer 2

ここで、AngularJSはXHR（XMLHttpRequest）標準に準拠していますあなたは普通の角度のJS $httpとHTMLのFileReaderを組み合わせて使うことができます。

トリックは、あなたがリーダーに渡すブロブとしてデータを取得することです。

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