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.
{ 28 comments… read them below or add one }
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.
Hi,
I have a challenge with capturing components in Flex/Air (I am using Flex 3). It didn’t capture the whole component, for example it only captured a part of the Datagrid or Image (I put datagrid within the Canvas and put Image inside Canvas –> Form)
My question is: Does captureImage depend on the position of the component? If so, how to solve this? Please help.
Thanks in advance.
And, one more question…How to capture the whole datagrid if it is long (having the scrollbar).
Thanks :)
hi m very new to Flex..
Can someone please explain this code..
i really cannot unserstand why it is converted to ByteArray and what is swfLoader
please help..
How can I use the above code to capture desktop screenshot.
Like Print screen button do it .
Any kind of help is appreciated
thanks
@Khurram,
As far as I know, you cannot take desktop screenshots. Flex/Flash Player only has access to Flash Player content, not the entire desktop.
Peter
Peter thanks for the quick response.
I want to integrate it with a php website. I want to capture screenshot of desktop and send it to php to save image in a specified directory. I have created the code to capture webcam image and store it with PHP.
Can we save screen shot using something else, I have seen there is a flash.display.screen class. Can we do it using this?
Is it possible to generate printscreen button event from flex. This will copy the image to clipboard., than using clipboard calss copy the image from clipboard?
I am new to flex don’t have much knowledge of flex. any kind of help is highly appreciated
thanks
@Khurram,
As far as I know it isn’t possible, but you may want to try asking on a high-traffic list like FlexCoders.
I imagine allowing Flash Player to take screenshots of the entire desktop could be some sort of security exploit, so I can see it not being supported in the web browser. I’m not familiar with the flash.display.screen class, and in fact, I cannot even see it in the documentation: http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/
This may be possible with Adobe AIR outside the browser.
Peter
http://blog.everythingflex.com/2008/04/24/do-a-screen-capture-with-adobe-air/
http://myspyder.net/tools/websnapshot/
http://toki-woki.net/p/WebKut/
Peter, I have a question about the ImageSnapshot class and it’s capabilities. I need to capture a Canvas that’s scaled dynamically with scaleX and ScaleY values. The Canvas contains dynamically added children that are scaled along with the canvas. In the end I have to scale the board to about 2400px wide and 12,000px tall. I know of the 4095px limit with the bitmapData class. I want to know if it’s possible to capture the large canvas as individual images. I tried the CaptureBitmapData() method and had no luck. It just copied the canvas at it’s original size and then fills in the rest with some background filling. I’ve read a lot of your examples and am very thankful. If you have any ideas on how I can get around this that’d be great! Thanks a ton, and Happy Thanksgiving!
@Adrian Murray,
Sorry, I know very little about the ImageSnapshot class apart from what examples I’ve hacked together on this site. You could try asking on the FlexCoders list or in the Adobe Flex Forums and see if anybody has an idea there.
Peter
Thank u thank u very much .. i learned a new thing!
keep
Hi
Its nice Example, Is there any way to take screen shot of Video?, I am using Iframe component for Video Streaming…
Thnaks
Aruna