HTML/JavaScript Acceda a datos EXIF ​​antes de la carga de archivos

Question

Estoy tratando de extraer EXIF ​​ datos de una imagen (jpeg) que se ha arrastrado al navegador o se ha seleccionado mediante un elemento de entrada de archivo html.

Logré obtener una vista previa de la imagen en el navegador usando FileReader and FileReader.readAsDataURL como se describe here.

y encontré un EXIF library que permite extraer los datos EXIF ​​de una imagen a través de javascript. Pero para mí solo funciona si lo uso con las etiquetas normales img que cargan su contenido en una URL.

También encontré this question en StackOverflow donde la respuesta aceptada indica que simplemente no es posible.

Pero estoy bastante seguro de que se puede realizar porque 500px.com extrae los datos EXIF ​​inmediatamente después de que se agrega un archivo para cargarlo y antes de que se termine la carga.

Algunas ideas de cómo debería ser posible extraer los datos EXIF ​​de la imagen codificada en base64 que obtengo del FileReader?

Answer 1

Finalmente encontré una solución del lado del cliente para el problema:

1. leer el archivo usando el FileReader y el método .readAsBinaryString
2. luego envolver esa cadena binaria en un objeto BinaryFile que ya está incluido en el EXIF Library
3. Finalmente llamar EXIF.readFromBinaryFile(binaryFileObject);

y su hecho :)

Answer 2

Eche un vistazo al código de FxIF firefox extension. Lee datos exif usando solo JavaScript. Para leer el contenido del archivo, puede usar el FileReader API de los navegadores modernos.

Answer 3

jQuery-fileExif javascript library lee los datos de la imagen exif antes de la carga.
GitHub link, ejemplo jsfiddle de la biblioteca.

var someCallback = function(exifObject) { 

    $('#cameraModel').val(exifObject.Model); 
    $('#lat').val(exifObject.GPSLatitude); 
    $('#lng').val(exifObject.GPSLongitude); 
    // Uncomment the line below to examine the 
    // EXIF object in console to read other values 
    //console.log(exifObject); 

    } 

     try { 
     $('#file').change(function() { 
      $(this).fileExif(someCallback); 
     }); 
     } 
     catch (e) { 
     alert(e); 
     }