Flex Examples
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.
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.
Share
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
How can we get an image of the entire component? I take your code and add a bunch of rows to your DG to create a vertical scroll, the image is just a screenshot. I need to create and image of the entire component.
@Anonymous,
You’d probably have to set the DataGrid control’s
rowCountproperty to the number of items in the DataGrid control’s data provider and then take the screenshot. As far as I know there is no way to get the snapshot to auto-scroll the control and capture all rows automatically.Peter
hi Peter
i do have the same problem as this:
“You’d probably have to set the DataGrid control’s rowCount property to the number of items in the DataGrid control’s data provider and then take the screenshot. As far as I know there is no way to get the snapshot to auto-scroll the control and capture all rows automatically.”
what he is saying is like the functionality that is available when we print a component using FlexPrintjob by setting FlexPrintJobScaleType.NONE . we can print the entire component not just the Visible part.
how can i attain the same functionality but to save the component using ImageSnapShot?
What’s interesting about this class is it doesn’t appear to take screenshots of components (or Images) that have filters applied to them. It’ll take the capture but minus the filter effects :-/
Regarding my last post….please ignore! It looks like the ImageSnapshot class *does* in fact include filters in it’s capture ;)
In Air, I can use this code to capture the displayed contents of an html container, except when the container has a pdf loaded into it. If there is a pdf, the result is just a black box. Why? How can I capture the displayed content of a pdf?
I am also having this issue. No solutions?
Have you found a way to capture the displayed content of a pdf?
Thanks
AB
Hi Peter,
is it possible to create an image-snapshot of an non visible item (a item that is currently not visible and not on the display list)?
@Marcus,
I’m not sure. You could try adding the non-visible item to a parent container and not add that parent container to the display list. Not sure if that would work or not, but may be worth a shot.
Peter
@Marcus,
Sorry, see post below for a suggestion…
Thanks 4 the example . It was help full 4 me. Is there any way to make a jpeg file of the snap shot and save it to local mechine whitout any backend help.
Hi,
I have a requirement to take a website home page screen shot. Could anyone help me please.
I have a text input. i will enter website address. when click on submit i have to take the screen shot of the website home page which is entered in text input and i have to display that in image controller on my page. Is there any way to achieve this?
@Marcus
Have you tried this?
1) hide / show the components you need
2) call the validateNow() method of the component you are getting a snapshot of.
3) take a snapshot of your compoennt
4) show/hide
5) call validateNow
You shouldn’t see any changes on the screen, but the snapshot will have what you need.
Breizo
I am using JPEGEncoder for taking image…But if shows black in the blank space of my application can anyone know how to fix this bug…