3

I'm going to make a game that the user detects the different area of the two image. That two images has a few different area and looks all same, so the users should find out.

so I want to compare two different bitmap image and detect the different area.

does somebody can give me a hint? Do I have to use the canvas?

I'm making this game with HTML5, javascript.......

user1505537
  • 41
  • 2

3 Answers3

2

first draw each image onto a canvas

var img1 = (your first image), 
    img2 = (your second image),
    ctx1 = document.createElement('canvas').getContext('2d'),
    ctx2 = document.createElement('cavnas').getContext('2d');

ctx1.canvas.width = img1.width;
ctx2.canvas.width = img2.width;
ctx1.canvas.height = img1.height;
ctx2.canvas.height = img2.height;

ctx1.drawImage(img1, 0, 0);
ctx2.drawImage(img2, 0, 0);

Then get the image data for each img

var data1 = ctx1.getImageData(0, 0, img1.width, img1.height);
var data2 = ctx2.getImageData(0, 0, img2.width, img2.height);

and finally compare (this assumes img1 and img2 are the same dimensions)

var different = [];

for (var y=0; y<img1.height; y++){
    for (var x=0; x<img1.width; i++){
        var pos = (x * 4) + (y * (img.width * 4));
        for (var i=0; i<4; i++){
            if (data1[pos + i] != data2[pos + i]){
               different.push({x: x, y: y});
            }
        }
    }
}

This will give you an array of x, y coordinates of all pixels that are different between the two images.

hobberwickey
  • 6,118
  • 4
  • 28
  • 29
  • Using `getImageData()` now results in [_SecurityError: The operation is insecure_](https://stackoverflow.com/questions/17035106/context-getimagedata-operation-is-insecure), which is thrown to protect end user privacy. – Adam Katz Sep 28 '17 at 19:38
  • The security error is only for remote images. Images on the same domain work fine – hobberwickey Sep 29 '17 at 19:56
0

You need to get the rgb values somehow from the image and compare them. you can refer openCV libraries to see how Image processing is done.

or maybe you can design an applet that will be embedded in web page. Java will provide classes to manupulate the RGB Values .

Invert the colors of one image and superimpose with other . Take a absolute difference and check at what pixel you are getting the difference.

May13ank
  • 548
  • 2
  • 9
  • 24
-1

JavaScript isn't able to check pixels in a picture. That's why colorpickers only work on divs (they read out the background-color)

Niranda
  • 79
  • 4