使用 HTML5 将图像转换为二进制数组 (blob)
我正在尝试使用 Chrome 和 Firefox 中 HTML5 支持的“FileReader”和“File”API 将图像转换为二进制数组,但它似乎在 Chrome 上无法正常工作。我只有一个简单的 HTML 页面,其中一个文件作为输入类型:
<input id="image_upload" type="file" />
从这里我使用 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
});
当此方法在 Chrome 上执行时,我在控制台中收到错误消息:
uncaught TypeError: Object #<File> has no method 'getAsBinary'
我正在使用截至今天 (2011-05-31) 的最新版本的 Google Chrome版本:11.0.696.71,根据消息来源,最新版本的 Chrome 应该支持此方法。
这似乎不起作用,所以我尝试使用 FileReader
API,但也没有任何运气。我尝试这样做没有结果:
$('#image_upload').change(function() {
var fileList = this.files;
var file = fileList[0];
var r = new FileReader();
r.readAsBinaryString(file);
alert(r.result);
]);
但这只返回任何内容,我认为这是因为 readAsBinaryString() 是一个 void 方法。我完全不知道如何让它在 Chrome 和 Firefox 上工作。我在网上搜索了无数的例子,但没有结果。我怎样才能让它工作?
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:
<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:
$('#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:
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.71 and according to sources this method is supposed to be supported with the most current version of Chrome.
That did not seem to work so I tried to use the FileReader
API and did not have any luck with that either. I tried doing this to no avail:
$('#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?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
FileReader API 是一个异步 API,因此您需要执行以下操作:
The FileReader API is an asynchronous API, so you need to do something like this instead:
我发现我可以给自己回电,例如:
这非常有效。一旦完成,我就可以将从 onload 函数返回的 blob 传递给自己。
Figured out I could go pass a call back to myself such as:
This works perfectly. I am able to pass the blob returned from the onload function to myself once it is finished.