在 Javascript 中将图像转换为二进制数据或字符串答案

【问题标题】：Convert Image to Binary Data or String in Javascript在 Javascript 中将图像转换为二进制数据或字符串
【发布时间】：2011-08-23 04:32:23
【问题描述】：

我正在使用 Chrome 扩展上的 XMLHttp Request 将图像文件上传到 TWITPIC。我需要将图像作为有效负载发送。有没有办法做到这一点？我找到了这个链接Convert an image into binary data in javascript 但这适用于图像标签。我需要一种方法来指定图像文件路径并将图像上传到 TWITPIC。

我开始了解带有 HTML 5 的 FileReader API。有什么方法可以使用它吗？？它应该适用于本地文件。

Chrome 扩展是否支持 FileReader API 而无需运行 localhost 服务器？？

【问题讨论】：

标签： javascript html google-chrome google-chrome-extension filereader

【解决方案1】：

我自己找到了答案。 Chrome 扩展确实支持 HTML 5 的 FileReader API。所以下面的代码很简单。

  var reader = new FileReader();
  reader.readAsDataURL(f);

【讨论】：

这个 base64 对文件进行编码，它不是二进制文件，并且会使文件大小膨胀约 33%，这可能不是问题，但值得考虑。 readAsBinaryString(f) 会将文件作为二进制数据返回，但似乎与 IE10 不兼容。

【解决方案2】：

您可以使用它来使用 XMLHTTPRequests 获取图像的二进制数据，我最近将它用于类似目的：

var dataToBinary = function(data){
    var data_string = "";
    for(var i=0; i<data.length; i++){
        data_string += String.fromCharCode(data[i].charCodeAt(0) & 0xff);
    }
    return data_string;
};

$.ajax("http://some.site.com/myImage.jpg", {
    success: function(data){
        binary = dataToBinary(data);
        //or: 'binary = data', dataToBinary might not be needed
    },
    mimeType: "text/plain; charset=x-user-defined"
});

并且二进制数据存储在binary变量中。

【讨论】：