¿Cómo comparar el contenido de dos elementos HTML5-CANVAS?

Question

Me gustaría comparar dos imágenes con JavaScript. Uno se dibuja en un lienzo HTML5, el otro podría estar en otro lienzo HTML5, o podría ser un archivo de imagen GIF o PNG. Necesito la comparación para las pruebas automatizadas. ¡Gracias por la ayuda!

Answer 1

Muy bien, esta no es una solución completa para su problema, pero podría ayudarlo a encontrar una buena manera de comparar los dos elementos de lona.

var ctx = canvas.getContext('2d');
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixels = imageData.data;

for(var i = 0, il = pixels.length; i < il; i++) {
    // pixels[i]
}

Este es un ejemplo básico sobre cómo recorrer todos los píxeles en el lienzo. Dependiendo de lo que desee hacer, puede comparar los píxeles entre sí o es posible que desee comparar los dos imageData vars entre sí