Возможно преобразование файла изображения в двоичный формат в 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>