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.

Tagged as: compare()