使用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）

回答

相關問題