CODEWITHSUNDEEP
javascripthtml5-canvas
user1027167
user1027167

Reputation: 4438

How to compare content of two html5-canvas-elements?

I would like to compare two images with javascript. One is drawn on a html5 canvas the other might be on another html5 canvas, or it might be a gif- or png-image-file. I need the comparision for automated testing. Thanks for help!

Upvotes: 6

Views: 5467

Answers (1)

Manuel van Rijn
Manuel van Rijn

Reputation: 10305

alright this isn't a complete solution for your problem but it might help you find a good way to compare the two canvas elements.

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

This is a basic example how to loop through all the pixels on the canvas. Depending on what you want to do you can compare the pixels with each other or you might want to compare the two imageData vars with each other

Upvotes: 10

Related Questions