可以在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>