Flex Examples

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.