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

【问题标题】：Is Possible to convert image file to binary format in Javascript.可以在 Javascript 中将图像文件转换为二进制格式。
【发布时间】：2016-10-29 01:42:58
【问题描述】：

如何在 Javascript 中将图像文件转换为二进制格式。我无法为此找到解决方案。请解释这可能吗？

【问题讨论】：

stackoverflow.com/questions/6150289/…
一个图像文件是二进制。你到底想转换什么？
dup 假定本地加载的文件。答案已经过时，并且不会产生二进制格式（data-uri）。不过，OP 应该考虑提供更多信息。

标签： javascript jquery bytearray web-sql

【解决方案1】：

使用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...&lt;br&gt;

【讨论】：

【解决方案2】：

目前的图像文件是二进制图像数据（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
});

【讨论】：