Wie vergleicht ich Inhalte von zwei HTML5-Canvas-Elementen?

Question

Ich möchte zwei Bilder mit JavaScript vergleichen. Einer wird auf einer HTML5-Leinwand gezeichnet, die andere auf einer anderen HTML5-Leinwand oder einem Gif- oder PNG-Image-Datei sein kann. Ich brauche den Vergleich für automatisierte Tests. Danke für die Hilfe!

Answer 1

Okay, das ist keine vollständige Lösung für Ihr Problem, aber es kann Ihnen helfen, eine gute Möglichkeit zu finden, die beiden Leinwandelemente zu vergleichen.

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]
}

Dies ist ein grundlegendes Beispiel, wie Sie alle Pixel auf der Leinwand durchlaufen. Je nachdem, was Sie tun möchten, können Sie die Pixel miteinander vergleichen, oder Sie möchten möglicherweise die beiden vergleichen imageData vars miteinander