9

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

違いはなんですか？

4

2 に答える 2

0

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

キャンバス要素 (canvas.toDataURL("image/png")) からサーバー (ノード + エクスプレス) に画像データ文字列を投稿し、サーバーに 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);

サーバーに画像を保存するための高速関数：

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");
});
于 2013-08-24T19:42:31.950 に答える