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。

＆＃13;

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

＆＃13;

Loading...<br>

＆＃13;

可以在Javascript中将图像文件转换为二进制格式。

2 个答案: