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

As we saw in a previous entry, “Taking screenshots in Flex 3 using the ImageSnapshot.captureImage() method”, it is possible to take a screenshot of an item on the display list using the static ImageCapture.captureImage() method. Once the image is captured, we accessed the image’s pixel data using the ImageCapture object’s data property, which was displayed using the SWFLoader control.

The ability to load a ByteArray object directly into a SWFLoader was added in Flex 3 build 187814, you may need to update your SDK build by downloading a recent nightly build from http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html.

The following example shows how you can take a snapshot of an item on the display list using the static ImageSnapshot.captureBitmapData() method, which returns a BitmapData object, as seen in the following snippet:

var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(source);
swfLoader.source = new Bitmap(imageBitmapData);

Full code after the jump.

View MXML

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

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

            private function takeSnapshot(source:IBitmapDrawable):void {
                var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(source);
                swfLoader.source = new Bitmap(imageBitmapData);
            }
        ]]>
    </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.