Conversión de imagen a matriz binaria (blob) con HTML5

Question

Estoy intentando utilizar las API 'FileReader' y 'File' que son compatibles con HTML5 en Chrome y Firefox para convertir una imagen en una matriz binaria, pero no parece para que funcione correctamente en Chrome. Sólo tengo una página HTML simple con un archivo como el tipo de entrada:

<input id="image_upload" type="file" /> 

Y a partir de aquí, yo estoy usando jQuery para agarrar el contenido de la imagen y luego mediante la API: File.getAsBinary() para convertirlo en una matriz binaria . Esto funciona perfectamente en Firefox, pero no en Chrome:

$('#image_upload').change(function() { 
    var fileList = this.files; 
    var file = fileList[0]; 
    var data = file.getAsBinary(); 
      //do something with binary 
}); 

Cuando este método se ejecuta en Chrome me sale un error en la consola diciendo:

uncaught TypeError: Object #<File> has no method 'getAsBinary' 

estoy usando la versión más arriba-hasta la fecha de Google Chrome que a día de hoy (2011-05-31) es versión: 11.0.696.71 y según las fuentes, se supone que este método es compatible con la versión más actual de Chrome.

Eso no parecía funcionar, así que traté de usar la API FileReader y tampoco tuve suerte con eso. He intentado hacer esto en vano:

$('#image_upload').change(function() { 
    var fileList = this.files; 
    var file = fileList[0]; 
    var r = new FileReader(); 
    r.readAsBinaryString(file); 
    alert(r.result); 
]); 

Pero eso sólo no devuelve nada que yo supongo que se debe a readAsBinaryString() es un método vacío. Estoy completamente enterado de cómo hacer que esto funcione tanto para Chrome como para Firefox. He buscado en toda la web mirando innumerables ejemplos en vano. ¿Cómo puedo hacer que funcione?

Answer 1

La API FileReader es una API asíncrona, por lo que necesita para hacer algo como esto en su lugar:

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

Answer 2

dimos cuenta de que podía ir a pasar una llamada de vuelta a mí mismo, tales como:

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); 
} 

Esto funciona perfectamente Puedo pasar el blob devuelto por la función de carga a mí mismo una vez que haya finalizado.