Comparing two bitmap images using the BitmapData class

The following example shows how you can compare the bitmap data of two embedded images using the BitmapData class’s compare() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/19/comparing-two-bitmap-images-using-the-bitmapdata-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import flash.display.BitmapData;

            [Bindable]
            [Embed(source="assets/bug.png")]
            private var BugIcon:Class;

            [Bindable]
            [Embed(source="assets/bug_add.png")]
            private var BugAddIcon:Class;

            private var diff:BitmapData;

            private function init():void {
                var bmd1:BitmapData = new BugIcon().bitmapData;
                var bmd2:BitmapData = new BugAddIcon().bitmapData;
                diff = BitmapData(bmd1.compare(bmd2));
                img3.source = new Bitmap(diff);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="image 1 alpha:"
                    direction="horizontal">
                <mx:HSlider id="img1_alpha"
                        minimum="0"
                        maximum="1"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="img1.alpha = img1_alpha.value;" />
                <mx:Image source="{BugIcon}" />
            </mx:FormItem>
            <mx:FormItem label="image 2 alpha:"
                    direction="horizontal">
                <mx:HSlider id="img2_alpha"
                        minimum="0"
                        maximum="1"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="img2.alpha = img2_alpha.value;" />
                <mx:Image source="{BugAddIcon}" />
            </mx:FormItem>
            <mx:FormItem label="diff image alpha:">
                <mx:HSlider id="img3_alpha"
                        minimum="0"
                        maximum="1"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="img3.alpha = img3_alpha.value;" />
            </mx:FormItem>
            <mx:FormItem label="scale:">
                <mx:HSlider id="scale"
                        minimum="1"
                        maximum="4"
                        value="1"
                        liveDragging="true"
                        tickInterval="1"
                        showTrackHighlight="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Canvas>
        <mx:Image id="img1"
                source="{BugIcon}"
                scaleX="{scale.value}"
                scaleY="{scale.value}" />
        <mx:Image id="img2"
                source="{BugAddIcon}"
                scaleX="{scale.value}"
                scaleY="{scale.value}" />
        <mx:Image id="img3"
                scaleX="{scale.value}"
                scaleY="{scale.value}" />
    </mx:Canvas>

</mx:Application>

View source is enabled in the following example.

5 thoughts on “Comparing two bitmap images using the BitmapData class

  1. Perfect!!! Exactly what I am looking for, how get bitmapdata from an embeded image. This blog is really the best ;-)

  2. My bad, the transparency is only applied to the BitmapData for the operation, not to the orignal images.

Comments are closed.