Uso de datos de imagen sin procesar de la solicitud ajax para URI de datos

Question

Nov 17, 2013, 09:15 PM

Uso de datos de imagen sin procesar de la solicitud ajax para URI de datos

Estoy tratando de usar una combinación de Ajax y URI de datos para cargar una imagen JPEG y extraer sus datos EXIF con una sola solicitud HTTP. Estoy modificando una biblioteca (https://github.com/kennydude/photosphere) para hacer esto; Actualmente, esta biblioteca utiliza dos solicitudes HTTP para establecer el origen de la imagen y obtener los datos EXIF.

Conseguir que el EXIF funcione, no hay problema. Sin embargo, estoy teniendo dificultades para usar los datos sin procesar de la solicitud ajax como fuente de la imagen.

Código fuente para una pequeña prueba de la técnica:

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>

function init()
{
    // own ajax library - using it to request a test jpg image
    new Ajax().sendRequest
    (
        "/images/photos/badger.jpg",
         { method : "GET",
            callback: function(xmlHTTP)
            {

                var encoded = btoa (unescape(encodeURIComponent(xmlHTTP.responseText)));
                var dataURL="data:image/jpeg;base64,"+encoded;

                document.getElementById("image").src = dataURL;
            }
        }
    );
}

</script>
<script type="text/javascript" src="http://www.free-map.org.uk/0.6/js/lib/Ajax.js"></script>
</head>
<body onload='init()'>
<img id="image" alt="data url loaded image" />
</body>
</html>

Obtengo lo que parece ser datos jpeg razonables enviados de vuelta, y la longitud (en bytes) de los datos sin procesar y los datos sin procesar de base64 codificados y no codificados de nuevo es la misma. Sin embargo, el intento de establecer la imagen src falla tanto en Firefox (25) como en Chrome (31) (versiones actuales): Chrome muestra el ícono de "imagen rota", lo que sugiere que src no es un formato válido.

Utilicé esta página de Mozilla para obtener información sobre la codificación / decodificación de base64:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding

¿Alguna idea de lo que podría estar mal? Mirando a mi alrededor, puedo crear el lado del servidor de imágenes codificadas en base64, pero ¿se puede hacer del lado del cliente de esta manera? Por un lado, el lado del servidor de codificación base64 obviamente aumenta el tamaño de los datos y todo el propósito de este ejercicio es reducir la cantidad de datos que se transfieren desde el servidor, así como el número de solicitudes.

Gracias nick