Html 使用 HTML5 将图像转换为二进制数组 (blob)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6196666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Converting image to binary array (blob) with HTML5
提问by Kevin
I am trying to use the 'FileReader' and 'File' APIs that are supported in HTML5 in Chrome and Firefox to convert an image to a binary array, but it does not seem to be working correctly on Chrome. I just have a simple HTML page with a file as the input type:
我正在尝试使用 Chrome 和 Firefox 中 HTML5 支持的“FileReader”和“File”API 将图像转换为二进制数组，但它在 Chrome 上似乎无法正常工作。我只有一个简单的 HTML 页面，其中一个文件作为输入类型：
<input id="image_upload" type="file" />
And from here I am using jQuery to grab the contents of the image and then using the API: File.getAsBinary()to convert it to a binary array. This works perfectly on Firefox but not on Chrome:
从这里开始，我使用 jQuery 来获取图像的内容，然后使用 API:File.getAsBinary()将其转换为二进制数组。这在 Firefox 上完美运行，但不适用于 Chrome：
$('#image_upload').change(function() {
var fileList = this.files;
var file = fileList[0];
var data = file.getAsBinary();
//do something with binary
});
When this method executes on Chrome I get an error in the console saying:
当此方法在 Chrome 上执行时，我在控制台中收到一条错误消息：
uncaught TypeError: Object #<File> has no method 'getAsBinary'
I am using the most up-to-date version of Google Chrome which as of today (2011-05-31) is version: 11.0.696.71and according to sources this method is supposed to be supported with the most current version of Chrome.
我正在使用最新版本的谷歌浏览器，截至今天（2011 年 5 月 31 日）版本为：11.0.696.71，根据消息来源，最新版本的 Chrome 应该支持这种方法。
That did not seem to work so I tried to use the FileReaderAPI and did not have any luck with that either. I tried doing this to no avail:
这似乎不起作用，所以我尝试使用FileReaderAPI 并且也没有任何运气。我尝试这样做无济于事：
$('#image_upload').change(function() {
var fileList = this.files;
var file = fileList[0];
var r = new FileReader();
r.readAsBinaryString(file);
alert(r.result);
]);
But that only returns nothing which I assume is because readAsBinaryString()is a void method. I am at a complete loss of how to get this working for both Chrome and Firefox. I have searched all over the web looking at countless examples to no avail. How can I get it working?
但这只会返回任何我认为是因为readAsBinaryString()是无效方法的内容。我完全不知道如何让 Chrome 和 Firefox 都能正常工作。我在网上搜索了无数个例子，但无济于事。我怎样才能让它工作？
回答by Ilmari Heikkinen
The FileReader API is an asynchronous API, so you need to do something like this instead:
FileReader API 是一个异步 API，因此您需要执行以下操作：
var r = new FileReader();
r.onload = function(){ alert(r.result); };
r.readAsBinaryString(file);
回答by Kevin
Figured out I could go pass a call back to myself such as:
想通了我可以给自己回电话，例如：
create_blob(file, function(blob_string) { alert(blob_string) });
function create_blob(file, callback) {
var reader = new FileReader();
reader.onload = function() { callback(reader.result) };
reader.readAsDataURL(file);
}
This works perfectly. I am able to pass the blob returned from the onload function to myself once it is finished.
这完美地工作。完成后，我可以将从 onload 函数返回的 blob 传递给我自己。
