16
Nov
07

Taking screenshots in Flex 3 using the ImageSnapshot.captureImage() method

The following example shows how you can use the static captureImage() method in the mx.graphics.ImageSnapshot class to take a screenshot of an item on the display list, convert it into a ByteArray, and display the ByteArray using a SWFLoader control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/16/taking-screenshots-in-flex-using-the-imagesnapshotcaptureimage-method/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.IUIComponent;
            import mx.graphics.ImageSnapshot;

            private function takeSnapshot(source:IBitmapDrawable):void {
                var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(source);
                var imageByteArray:ByteArray = imageSnap.data as ByteArray;
                swfLoader.load(imageByteArray);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object col1="Row 1, Col 1" col2="Row 1, Col 2" />
        <mx:Object col1="Row 2, Col 1" col2="Row 2, Col 2" />
        <mx:Object col1="Row 3, Col 1" col2="Row 3, Col 2" />
        <mx:Object col1="Row 4, Col 1" col2="Row 4, Col 2" />
        <mx:Object col1="Row 5, Col 1" col2="Row 5, Col 2" />
        <mx:Object col1="Row 6, Col 1" col2="Row 6, Col 2" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Take snapshot of DataGrid"
                click="takeSnapshot(dataGrid);" />
    </mx:ApplicationControlBar>

    <mx:HBox>
        <mx:DataGrid id="dataGrid" dataProvider="{arr}" />

        <mx:SWFLoader id="swfLoader">
            <mx:filters>
                <mx:DropShadowFilter />
            </mx:filters>
        </mx:SWFLoader>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.


16 Responses to “Taking screenshots in Flex 3 using the ImageSnapshot.captureImage() method”


  1. 1 NiceDay Nov 17th, 2007 at 11:10 am

    cool…

    looks only works in Flex 3 ?

  2. 2 flexLover Nov 17th, 2007 at 1:43 pm

    //I have an error in this row:

    var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(source);
    //(captureImage undefined method).
    
  3. 3 peterd Nov 17th, 2007 at 3:09 pm

    NiceDay,

    Yes, this was added in Flex 3.

    Peter

  4. 4 peterd Nov 17th, 2007 at 3:11 pm

    flexLover,

    This was the first time I’ve used the ImageSnapshot class. I’m not sure if it has changed much through the Flex 3 beta.

    I’m not sure what build you’re using, but try downloading the most recent Flex 3 SDK build from http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html and see if that helps.

    Peter

  5. 5 valentineday Nov 17th, 2007 at 5:25 pm

    Hey Peterd,

    Is there possibly to capture the image and allows user to download?

    Cheers

  6. 6 peterd Nov 18th, 2007 at 12:40 am

    valentineday,

    The easiest way would possibly be to use the ImageSnapshot class to take a screen capture, send the bytes as a base64 encoded string to a server, and then have your ColdFusion/PHP/ASP/whatever script prompt the user to download the image.

    Peter

  7. 7 Ralph Krausse Nov 18th, 2007 at 11:18 pm

    Hello Peter,

    I would like to use this but if I start a new flexbuilder project and copy in the source, it compiles and runs but when I take the snapshoot, I do get a copy of the grid but just image if you loaded a bad image (the default images that shows in development mode). No errors are thrown and looks like there are bytes but the swf just doesn’t load. I am using the latest SDK.

    thanks
    Ralph

  8. 8 Ralph Krausse Nov 19th, 2007 at 6:12 am

    An update Peter. I added a IOError event listener and this was the error it threw…

    text = “Error #2036: Load Never Completed. URL: file:///C:/Development/Flex/ImageTest/bin/‰PNG”
    Any ideas?

    thanks
    Ralph

  9. 9 peterd Nov 19th, 2007 at 7:42 am

    Ralph,

    Not sure. I’ve tried the sample on 3 different computers and didn’t see a problem.
    What version of the SDK are you using exactly? There have been a couple bug fixes in this area recently, so if you’re using the standard beta 2 SDK or a nightly build earlier than Thursday it may not work as expected.

    Also, which version of Flash Player are you using (I’m using WIN 9,0,60,235 (debug) on IE7/WinXP). If you aren’t sure, you can go to http://blog.flexexamples.com/about-you and copy/paste what it says at the top.

    Peter

  10. 10 Ralph Krausse Nov 19th, 2007 at 10:05 am

    hmm, looks like I am using the same version.. WIN 9,0,60,235 (debug). How does one find the version of the SDK?

    thanks for the quick reply

    Ralph

    btw, nice debug screen, I like that

  11. 11 peterd Nov 19th, 2007 at 10:44 am

    Easiest way to find your SDK version? Download the latest nightly build from http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html and note the number in the far left column. :)

    Second easiest way is to find where your SDK is installed and then “mxmlc -version” from the command line (oh, and make sure you’re in the /bin/ folder). Since that was a terrible explanation, here are a few examples.

    Flex Builder 3 has an /sdks/ directory which currently has a “2.0.1″ folder and “3.0.0″ folder. So to find out which version of the 3.0.0 SDK you are running, you’d do something like the following in Windows XP:

    C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\bin>mxmlc -version
    Version 3.0 build 186018
    

    If I wanted to find out which version of the 2.0.1 SDK I was running, I’d do the same thing in the 2.0.1 directory:

    C:\Program Files\Adobe\Flex Builder 3\sdks\2.0.1\bin>mxmlc -version
    Version 2.0.1 build 177276
    

    If you downloaded a nightly build at some point, you would need to go to the directory where you unzipped the files, open up a command prompt in the /bin/ directory, and type “mxmlc -version” from there.

    Hope that helps,
    Peter

  12. 12 Matt Platte Dec 9th, 2007 at 1:46 pm

    Version 3.0 build 183453
    MAC 9,0,60,235(debug)

    Safari’s Activity reports this error -> file:///Users/…/Documents/Flex Builder 3/HoleyCow/bin/

  13. 13 Matt Platte Dec 9th, 2007 at 2:33 pm

    Hmm, the message got clipped, but — never mind. I’m downloading a newer version of the SDK now. The SDK included with FB3 Beta 2 is quite ancient….

  14. 14 Solerous Mar 13th, 2008 at 11:42 am

    How would you do this without clicking on the button? In other words, what if the screen changes periodically and you want the screen shot automated? I’ve tried calling the captureImage directly and it never gets the new data. It pulls the data before it gets redrawn. I think this has to do with the flex event model somehow but I’m not sure.

  15. 15 Matthew Wallace Apr 28th, 2008 at 6:50 am

    Hey I saw that someone asked why this is not available for flash. Well guess what… it is!

    Watch this tutorial. Lee will show you how to use some external Adobe classes that will let you use the Encoder stuff in flash.

    http://gotoandlearn.com/player.php?id=44

    The tut is about building an air app but the classes for the most part can be used in a Flash based app if you like.

    -Matthew

  16. 16 Darvel May 8th, 2008 at 1:30 pm

    Your code does not work. Flex 3.

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".