Javascriptで画像ファイルをバイナリ形式に変換することができます。

Question

Javascriptでイメージファイルをバイナリ形式に変換する方法。私はこれのための解決策を得ることができません。これは可能かどうかを説明してください。

Answer 1

現時点での画像ファイルは、バイナリ画像データ（png、jpg、gifなど）です。質問がbase64でエンコードされた文字列への変換について質問された場合は、HTML5キャンバスをコンバージョンに使用するのが最善の方法です、以下のあなたの処分で使用することができます与えられた関数である。

function toDataUrl(url, callback, outputFormat){ 
    var img = new Image(); 
    img.crossOrigin = 'Anonymous'; 
    img.onload = function(){ 
     var canvas = document.createElement('CANVAS'); 
     var ctx = canvas.getContext('2d'); 
     var dataURL; 
     canvas.height = this.height; 
     canvas.width = this.width; 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL(outputFormat); 
     callback(dataURL); 
     canvas = null; 
    }; 
    img.src = url; 
} 

次にあなたが呼び出すことができます。

toDataUrl(imageURLString, function(base64Img){ 
    // Base64DataURL 
}); 

Answer 2

をXMLHttpRequestを使用してイメージをロードします。これはキャンバスを通過する必要がなくなります。 CORSの制限が両方に適用されるので、XMLHttpRequestでは直接データをArrayBufferまたはBlobとしてロードできます。

// Load image via XMLHttpRequest 
 
var xhr = new XMLHttpRequest();      // create a "loader" 
 
xhr.open("GET", "https://i.imgur.com/9LqhOl3b.jpg"); // url, CORS apply (!) 
 
xhr.responseType = "arraybuffer";      // or "blob" 
 
xhr.onerror = alert;         // use error handler here 
 
xhr.onload = function() {        // async onload handler 
 
    if (xhr.status === 200) process(xhr.response);  // All OK 
 
    else alert("Error:" + xhr.statusText);    // oops... 
 
}; 
 
xhr.send();           // send request 
 

 
// Now we can access it through typed array wo/ canvas 
 
function process(buffer) { 
 

 
    var view = new Uint8Array(buffer);     // access bytes through a view 
 
    console.log("Content:", view[0], view[1], view[2], view[3], ".. etc.."); 
 
    
 
    // convert to blob and show 
 
    var blob = new Blob([view], {type: "image/jpeg"}); 
 
    var url = URL.createObjectURL(blob); 
 
    var img = new Image; 
 
    img.src = url; 
 
    document.body.appendChild(img); 
 
}

Loading...<br>