Преобразование изображения в двоичный массив (блоб) с помощью HTML5

Question

Я пытаюсь использовать API-интерфейсы «FileReader» и «File», которые поддерживаются в HTML5 в Chrome и Firefox, для преобразования изображения в двоичный массив, но, похоже, оно не работает должным образом в 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'

Я использую наиболеетекущая версия Google Chrome, которая на сегодняшний день (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.Я искал во всем Интернете, глядя на бесчисленные примеры, но безрезультатно.Как я могу заставить его работать?

Answer 1

FileReader API - это асинхронный API, поэтому вам нужно сделать что-то вроде этого:

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

Answer 2

Понял, я мог бы перезвонить себе, например:

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, после его завершения.