compare two images and check equality

Question

do you know any source or info about comparing images within as3/flash?

I want to compare two images and check if the images are the same or not.

Check this example: http://imageshack.us/photo/my-images/825/imagecompare.jpg/

Any clues? Thank you in advance!

possible duplicate : http://stackoverflow.com/questions/5427691/comparing-two-bitmaps-against-each-other-for-match-as3 — loxxy, Nov 15 '12 at 17:20

loxxy · Accepted Answer · 2012-11-21T14:21:45.560

In addition to the duplicate answers,

I believe you can also use BitmapData.compare()

An example taken from the link, consider the following two BitmapData objects:

 var bmd1:BitmapData = new BitmapData(50, 50, true, 0xFFFF8800);
 var bmd2:BitmapData = new BitmapData(50, 50, true, 0xCCCC6600);
 var diffBmpData:BitmapData = bmd1.compare(bmd2) as BitmapData;
 trace ("0x" + diffBmpData.getPixel(0,0).toString(16); // 0x332200

Code Sample (for Percentage Difference) :

Don't how correct the results are, this is what I brewed up for a percentage :

var bmd1:BitmapData = new BitmapData(225, 225);
bmd1.draw(mc1);
var bmd2:BitmapData = new BitmapData(225, 225);
bmd2.draw(mc2);

var diffBmpData:BitmapData = bmd1.compare(bmd2) as BitmapData;

var diff:int = 0;
var total:int = 225 * 225;

for(var i=0; i<225; i++)
    for(var j=0; j<225; j++)
        diff += (diffBmpData.getPixel(i,j) != 0)? 1 : 0; 

info.text = Math.round((diff / total * 100)).toString();

where : info is a TextBox, mc1 & mc2 are two movieclips on stage.

I think you can make it better by comparing individual values (i.e how much different a pixel is) rather than a boolean is-pixel-similar match.

Result: (White space around the round image would be included)

enter image description here

thank you loxxy, do you have an idea, how it can result a percentage of difference? — apak61, Nov 16 '12 at 15:05
Iterate over each pixel of diffBmpData using getPixel32(i,j)... Count the ones which give 0 difference & use it for percentage. For a large image this should give a fair percentage... — loxxy, Nov 16 '12 at 18:37

score 3 · Answer 2 · answered Nov 15 '12 at 21:32

3

Using BitmapData.compare() will return 0 if the pixel values are identical.

trace(bmd1.compare(bmd2)); // 0

answered Nov 15 '12 at 21:32

xLite

1,441
3
15
28

score 0 · Answer 3 · edited May 23 '17 at 12:01

In addition to loxxy & xLite's answers, if you need to know how to get the BitmapData from an image file:

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);

loader.load( new URLRequest ( "http://www.fake.url.path/image.jpg" ) );

function onLoaded(e:Event):void {
    var bmp:Bitmap = loader.content as Bitmap;
    var bitmapData:BitmapData = bmp.data; 
    //bitmapData.Compare(...)
}

Also see loading image by Loader.loadBytes(byteArray)

compare two images and check equality

3 Answers3

Linked