JavaScript: obtener ImageData sin lienzo

Question

¿Es posible obtener un objeto ImageData de una imagen que no está en el lienzo pero en otro lugar en el árbol DOM como un <img> normal?

En caso afirmativo, ¿cómo?

Answer 1

usted tiene que crear un lienzo en la memoria y luego dibujar en este lienzo la imagen:

var canvas = document.createElement('canvas'); 
var context = canvas.getContext('2d'); 
var img = document.getElementById('myimg'); 
canvas.width = img.width; 
canvas.height = img.height; 
context.drawImage(img, 0, 0); 
var myData = context.getImageData(0, 0, img.width, img.height); 

Pero esto no va a funcionar si la imagen viene de otro dominio. Esta es una restricción de seguridad que no puede evitar si no tiene control del servidor (tenga cuidado de que si abre su archivo html con el archivo: // tendrá muchas restricciones adicionales, use http: //)

Answer 2

Como ya se ha sugerido, Canvas ofrece la única solución para crear objetos ImageData.

Si realmente está configurado en contra de usar el elemento canvas para cargar los datos de imagen (tal vez estamos hablando LTE IE8), siempre se puede tener en cuenta al analizar los datos de la imagen base 64 utilizando la ubicación src de una imagen objeto

http://blog.calyptus.eu/seb/2009/05/png-parser-in-javascript/

Es difícil, pero si debe, podría potencialmente analizar las imágenes en una matriz de esta manera.

https://github.com/devongovett/png.js/blob/master/png.js

Esto le muestra cómo cargar los datos con una petición xhr y analizar los datos PNG. Internamente utiliza el lienzo para otras cosas, pero el subconjunto que le interesa no tiene lienzo. Debería seguir una implementación similar para cada formato de imagen que le interese.

Debo mencionar que las limitaciones de lectura de píxeles de la imagen son idénticas en términos de seguridad. Nunca podrá leer píxeles que provienen de un tercero, con o sin lienzo. XMLHTTPRequest va a estar ligado al gobierno de las políticas entre dominios. Esto evita que las secuencias de comandos roben contenido de terceros, que incluye imágenes que pueden contener información sensible del usuario.

Si necesita leer imágenes en un dominio de terceros (que no requieren autenticación para ver), debe ejecutar un servidor proxy de imágenes en su dominio que le permita solicitar imágenes en el mismo dominio. Si necesita tomarse las molestias de eso, podría ser más fácil simplemente proporcionar los datos de la imagen como una matriz json en primer lugar.