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.
<?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.
cool…
looks only works in Flex 3 ?
//I have an error in this row:
NiceDay,
Yes, this was added in Flex 3.
Peter
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
Hey Peterd,
Is there possibly to capture the image and allows user to download?
Cheers
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
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
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
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
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
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:
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:
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
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/
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….
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.
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
Your code does not work. Flex 3.