Duplicating images using the Bitmap and BitmapData classes

By Peter deHaan On August 3, 2007 · 28 Comments

In a previous post (Finding a pixel’s color value using the Bitmap classes and getPixel()) we looked at copying an image so we could build a simple color-picker like app. In this post, we explore duplicating a loaded image and copying it into a TileList control. Each time you press the “Copy image” button, a new instance of the source image is created and added to the TileList control’s data provider.

As an added bonus, we also create a custom item renderer consisting of an HBox container, Image control, and a Label control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/03/duplicating-images-using-the-bitmap-and-bitmapdata-classes/ -->
<mx:Application name="Image_content_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
 
            [Bindable]
            private var arrColl:ArrayCollection = new ArrayCollection();
 
            private function dupeImage(source:Image):void {
                var data:BitmapData = Bitmap(source.content).bitmapData;
                var bitmap:Bitmap = new Bitmap(data);
 
                arrColl.addItem({image:bitmap, label:"item #" + (arrColl.length + 1)});
            }
        ]]>
    </mx:Script>
 
    <mx:HBox>
        <mx:Panel title="Source image">
            <mx:HBox verticalAlign="middle" horizontalAlign="center" width="100%" height="100%">
                <mx:Image id="img1" source="assets/logo.png" />
            </mx:HBox>
 
            <mx:ControlBar>
                <mx:Button label="Copy image" click="dupeImage(img1)" />
            </mx:ControlBar>
        </mx:Panel>
 
        <mx:TileList id="tileList" dataProvider="{arrColl}" width="300" height="200" columnCount="4" verticalScrollPolicy="on">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:VBox>
                        <mx:Image source="{data.image}" />
                        <mx:Label text="{data.label}" />
                    </mx:VBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:TileList>
    </mx:HBox>
 
</mx:Application>

View source is enabled in the following example.

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

28 Responses to Duplicating images using the Bitmap and BitmapData classes

li wenzhi says:

August 3, 2007 at 9:57 pm

Good sample of bitmap operation, thank your for sharing experience!

Reply
Anonymous says:

August 4, 2007 at 12:10 am

Very nice! I wait for the next example.

Reply
Tushar Wadekar says:

August 5, 2007 at 10:23 pm

Good one! Thanks.

~Tushar

Reply
techpop says:

August 21, 2007 at 10:40 pm

This is a great example. How about taking it a step further. Is there a way to grab “stills” from a playing flv, let’s say it’s a basic photo slideshow and compare them so you can “detect” a scene change? So you can create some kind of interval/timer that runs every so often, take a bitmap “snapshot” of what is in the video display and keep comparing it to the previous shot. I’m wondering if there are any methods in the bitmap class that can help determine the pixel percentage difference (or something like that) between two images captured in this way.

Reply
peterd says:

August 22, 2007 at 8:31 pm

techpop,

I think I have an example of grabbing video stills from an VideoDisplay control whenever it encounters a cuePoint event. Regardless, it should be fairly easy if you use the Timer class or maybe listen for the VideoDisplay control’s playheadUpdate event.

As for bitmap compares, I haven’t used it personally, but the BitmapData class has a compare() function which compares two BitmapData objects (see the Flex 2.0.1 LiveDocs for BitmapData.compare()).

Peter

Reply
judah says:

November 8, 2007 at 2:16 pm

A couple questions. Why do you use the Bitmap class instead of an Image class? Also, is there any reason not to use the clone method?
```
var image:Bitmap = new Bitmap(source.bitmapData.clone());
```
Reply
peterd says:

November 8, 2007 at 2:34 pm

judah,

No reasons, I think this was just the first approach that came to mind.

Peter

Reply
jj says:

April 4, 2008 at 8:24 am

I encountered problem with adding Images to TileList control, and it can be reproduced in your example as well – if you add about 30 copies of the bitmap, catch a scrollbar and start scrolling up and down intensively, after short while, bitmaps start disappearing from random tiles. Also, if i continue, i get this:

ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::DisplayObjectContainer/removeChild()
at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::$removeChild()
at mx.core::UIComponent/removeChild()
at mx.controls::SWFLoader/load()
at mx.controls::SWFLoader/commitProperties()
at mx.core::UIComponent/validateProperties()
at mx.managers::LayoutManager/validateClient()
at mx.controls.listClasses::TileBase/getPreparedItemRenderer()
at mx.controls.listClasses::TileBase/makeRowsAndColumns()
at mx.controls.listClasses::TileBase/scrollVertically()
at mx.controls.listClasses::TileBase/scrollHandler()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at mx.controls.scrollClasses::ScrollBar/http://www.adobe.com/2006/flex/mx/internal::dispatchScrollEvent()
at mx.controls.scrollClasses::ScrollThumb/mouseMoveHandler()

(I have 9,0,115,0 player)

Do you know any workaround for this? The problem is with TileList and Image controls together, rather than in BitmapData, because when i set direct image address in source field, same problem appears.

Thanks in advance

Reply
betehes says:

May 8, 2008 at 7:17 am

There is a big bug that I’m not able to fix…

If I fill the TileList with enough objects to make the scrolling button to appear and if I scroll, the images will disappear…

Am I the only one to have this problem ?

Is there a way to fix it ?

Thanks in advance.

Reply
martin says:

May 21, 2008 at 5:39 am

@betehes:

i’m having the exact same problem, very annoying, seems to be a bug in flex for me but i dunno how to fix

Reply
martin says:

May 21, 2008 at 7:10 am

@betehes:

i think i found a solution, changing the itemrenderer to:

worked in my case

Reply
martin says:

May 21, 2008 at 7:16 am

^^change the image tag in the itemrenderer to this, and link display namespace to “flash.display.*”
```
<mx:Image>
    <mx:source>
        <display:Bitmap bitmapData="{data.source}" />
    </mx:source>
</mx:Image>
```
sry for double post…seems wordpress has big issues with “greater than” and “smaller than” characters

Reply
- KevinC says:
  
  July 12, 2009 at 8:43 pm
  
  I can’t begin to tell you how long I have been looking for a simple solution to rendering a d*mn bitmap like your example…I think I love you. :)
  Thanks Martin. And Peter, than you a well.
  Best,
  KevinC
  
  Reply
martin says:

May 21, 2008 at 7:17 am

data.source should be data.image.displayObject in that case

Reply
vivek says:

July 23, 2008 at 5:21 am

Hello,

Is there any way to copy data from SWFLoader instance?

Thanks

Reply
zyanlu says:

August 10, 2008 at 10:21 pm

thanks martin.

your solution is great!

Reply
geoff says:

November 4, 2008 at 7:58 am

still cant get this to work with the suggestions at the bottom of the blog

^^change the image tag in the itemrenderer to this, and link display namespace to “flash.display.*”

could you explain this in greater detail

what does this mean ?

link display namespace to “flash.display.*”

thanks

Reply
mrm says:

November 4, 2008 at 5:03 pm

@geoff

It means you have to write this:
```
xmlns:display="flash.display.*"
```
at the root tag of your application.

Reply
Jason says:

December 1, 2008 at 7:29 pm

Martin, you are awesome!! Your solution worked for me. Thanks!!

Reply
tgl says:

March 20, 2009 at 7:26 pm

When I run the posted demo it works fine, but when I run the code in Flex Builder 3.0.2 SDK 3.2, I run into the scroll problem that everyone describes here, even with the solutions the images disappear during the scroll. Please assist, thank you.

Reply
Atul Singh Parihar says:

July 20, 2009 at 10:57 pm

its very nice but if you implement with loader then its very usefully
Thanks
Atul Singh Parihar

Reply
- Devsachin says:
  
  April 21, 2010 at 4:53 am
  
  Are u belonging to rewa Mp India??? :)
  
  Reply
luigi russo says:

December 16, 2009 at 8:10 am

Hello Peter
can i use prettyPhoto for the zooming effect in my Flex Project…
Thanks ciaooo from Italy

Reply
Devsachin says:

April 21, 2010 at 4:57 am

Hi Peter, Can we implement magnifying glass logic by bitmapData. Do you already have any example for it?
Please let me know
:
Sachin dev

Reply
Devsachin says:

May 11, 2010 at 5:13 am

Hi
I have created a sample here with Flex for
magnifying glass in flex:

http://devsachinonflex.blogspot.com/2010/04/magnifying-glass-in-flex.html

Sachin dev tripathi
Flex Developer

Reply
Brian Bishop says:

May 24, 2010 at 6:40 am

Hi

Had disappearing images trying with Actionscript only, but got it to work fine with the above example – albeit with more mxml that I would have liked:)

Thanks a mill for the post (and to Martin for the fix)

Brian

Reply
Kenny says:

November 9, 2010 at 6:01 pm

Hi, if I don’t change the bitmap data, why do I need to clone it when duplicating a Bitmap? Can’t I just use the same instance of the BitmapData in multiple Bitmaps?

Reply
sanjay says:

April 28, 2011 at 11:50 pm

Is there a way to make selection, like magmatic lasso tool around an image and then crop it and save as a .png file in flex.

Reply