使用HTML5将图像转换为二进制数组（blob）

我试图使用HTML和Chrome浏览器中支持的'FileReader'和'File'API将图像转换为二进制数组，但似乎没有在Chrome上正常工作。我只是有一个文件作为输入类型一个简单的HTML页面：使用HTML5将图像转换为二进制数组（blob）

<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）的版本为：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都能正常工作。我在网上搜索了无数的例子，无济于事。我怎样才能使它工作？

来源

2011-06-01 Kevin

的的FileReader API是异步API，所以你需要做这样的事情，而不是：

var r = new FileReader(); 
r.onload = function(){ alert(r.result); }; 
r.readAsBinaryString(file);

来源

2011-06-01 11:30:07

想通了，我可以去通过一个电话回自己，如：

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传递给我自己。

来源

2011-06-02 16:39:06 Kevin

使用HTML5将图像转换为二进制数组（blob）

回答

相关问题