如何解决用HTML5将图像转换为二进制数组blob
| 我正在尝试使用Chrome和Firefox HTML5中支持的\'FileReader \'和\'File \'API将图像转换为二进制数组,但在Chrome上似乎无法正常工作。我只有一个简单的HTML页面,其中文件作为输入类型:<input id=\"image_upload\" type=\"file\" />
从这里开始,我使用jQuery捕获图像的内容,然后使用API:“ 1”将其转换为二进制数组。这在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\'
我使用的是Google Chrome的最新版本,而今天(2011年5月31日)的版本是: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()
是一个无效方法。我完全不知道如何在Chrome和Firefox上都可以使用它。我在网上搜索了无数示例,但无济于事。我该如何运作?
解决方法
FileReader API是异步API,因此您需要执行以下操作:
var r = new FileReader();
r.onload = function(){ alert(r.result); };
r.readAsBinaryString(file);
, 想通了,我可以回电给自己,例如:
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);
}
这很完美。一旦完成,我就能将onload函数返回的blob传递给自己。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。