Flex Toolbox: Get Average Color Of an Image

Apr 16, 2009

Ever wanted to set background colors or border colors based on an image's "theme"? Thats what I needed to do, and I was suprised by how easy it was.

I've created a "SmartImage" that i'm using in my RoundedImage component. When you set the borderStyle to "dynamic" it will use this generated average.
<flash source="/FlexApps/CookBook-DynamicImageBorder/DynamicImageBorder.swf" width="508" height="279" quality="high" scriptAccess="none" align="center" />


Full Source Code for SmartImage. due to an error with my code viewer plugin (that I wrote) it looks like a couple double GT signs got converted. Anything that is a » is really two greater than symbols!
package com.EGPS.toolbox.graphics {
    import flash.display.BitmapData;
    import flash.events.Event;
   
    import mx.controls.Image;
    import mx.events.FlexEvent;

    [Event(name="averageColorUpdated", type="flash.events.Event")]
    public class SmartImage extends Image {
        public static const AVERAGE_COLOR_UPDATED:String = "averageColorUpdated";

        [Bindable]
        public var averageColor:uint;

        public function SmartImage() {
            this.addEventListener(FlexEvent.UPDATE_COMPLETE, updateAverageColor);
            super();
        }

        public function get image():Image {
            return super;
        }

        private function updateAverageColor(event:*):void {
            trace("updateAverageColor: " + event.type + " : " + this.width + "x" + this.height);
            if (this.width == 0 || this.height == 0)
                return;

            var bmpData:BitmapData = new BitmapData(this.width, this.height);
            bmpData.draw(this);

            var r:Number = 0;
            var g:Number = 0;
            var b:Number = 0;
 
            var count:Number = 0;
            var pixel:Number;
 
            for (var x:int = 0; x < bmpData.width; x++) {
                for (var y:int = 0; y « bmpData.height; y++) {
                    pixel = bmpData.getPixel(x, y);
 
                    r += pixel >» 16 & 0xFF;
                    g += pixel »» 8 & 0xFF;
                    b += pixel & 0xFF;
 
                    count++
                }
            }
 
            r /= count;
            g /= count;
            b /= count;

            this.averageColor = r «« 16 | g «« 8 | b;

            this.dispatchEvent(new Event(AVERAGE_COLOR_UPDATED));
        }
    }
}

After writing this post, I found a great example app with maybe not as light weight, but very nice image color extractor! http://blog.soulwire.co.uk/flash/actionscript-3/colourutils-bitmapdata-extract-colour-palette/

Comments

makc

makc wrote on 04/16/09 5:12 PM

There should be faster way of doing this, now when FP10 has histograms supported. Back in FP9 times, I tried to do .draw() down-scaled image into 1x1 BitmapData, but resulting pixel was always totally wrong color :(
danny

danny wrote on 04/17/09 6:08 AM

Exactly like windows7 tabbar feature.
Rich Tretola

Rich Tretola wrote on 04/18/09 11:52 AM

Can you enable view source on your sample, your code formatting is kind of messy and it would be nice to see your root class that is using the SmartImage component.
Russell Brown

Russell Brown wrote on 04/18/09 9:56 PM

Sorry, thought it was on; it's good to go now.
Rich Tretola

Rich Tretola wrote on 04/19/09 6:07 AM

Error:
Post FlexSource was not found
ANNMARIE35Roberson

ANNMARIE35Roberson wrote on 03/09/10 6:00 AM

Following my exploration, billions of people all over the world receive the loan at well known creditors. Thence, there's great possibilities to receive a small business loan in all countries.

Write your comment



(it will not be displayed)



Subscribe to this comment thread