On a recent Flex project, we needed to take a snapshot of what’s shown on the screen and save it as an image. I had seen somewhere that this was possible, but couldn’t locate how exactly it was to be done. Turns out it’s very easy to do such a screen capture / screen grab using Flex.
The essential steps are:
- Create a new BitmapData object.
- Copy the target component’s pixel data into BitmapData object.
- Convert the BitmapData object to a PNG encoded ByteArray (using the PNGEnc library)
- Convert the ByteArray to a Base64Encoded string so that we can send the data safely to the backend.
- On the backend (PHP via WebORB in our case), decode the data and write it to a file.
Most of the piece come from two places. James Ward has described this technique in his Flex Paint sample. And Tinic Uro has written the PNG Encoder library. Let’s see the code now.
Here’s the Flex Code:
[xml]
[/xml]
We use WebORB for backend connectivity. Assuming you have the connection in place, we can simply call a method passing the base 64 encoded string and save it on the server. If you don’t have RemoteObject / Web Service, you can also use an HTTP POST. The reason to use Base 64 encoding is to get a string we can safely pass around, instead of a byte array.
Here’s the PHP side of the code:
[php]
public function saveImage($encodedPNGData)
{
if ($encodedPNGData != “”)
{
$binaryData = base64_decode($encodedPNGData);
$file = “assets/images/something.png”;
file_put_contents($file, $binaryData);
return $file;
}
return null;
}
[/php]
I could resize and do anything else with the image on the PHP side now.
Hope you find some creative use of this 🙂
Nice!
Currently i am concentrating on OpenLaszlo development at the moment, so i probably won’t be able to make use of this code. Still, it is possible to access flash api’s from OpenLaszlo, so maybe i can make use of that rather interesting ByteArray class to at least handle binary data.
Hello Sir
This is a cool stuff
In fact it helped me but can you clarify this
PNGEnc.encode
what it does and is it a class[could not locate it in the help]
Oops
I got the answer of my question
U have already mentioned it
Reading Skills have gone down 🙂
Hi!
You mention uploading the file could work with HTTP POST. How would that work?
I don’t have flex data services nor WebORB installed.
grtz!
Hi Maxim,
Make an HTTP Service and pass the base 64 encoded string as a parameter.
For more, a look at HTTPService Live Docs, Adobe article on using Flex with PHP and Mike Potter’s similar article.
HTH.
:Nirav
Wicked,
Thanks Nirav.
Implemented it into http://www.redesignme.org
greetings!
I just came across this, and I was still having trouble with getting the HTTP Service to work can anyone help me out?
@JmfD: What are the troubles you are having with HTTP Service to get this to work? Are you getting POST request on server? Can you dump everything that’s coming in POST and see what you get?
I’m pretty new to Flex and I don’t know how to pass the base 64 encode string as a parameter. When I’m trying to change it to a HTTP Post I get an error about how saveImage is undefined.
Hi i am newbie to flex,
When i try to integrate this code into flex applilcation, i got the error “Severity and Description Path Resource Location Creation Time Id
1180: Call to a possibly undefined method shr. project/src/components PNGEnc.as line 39 1244012791890 122
” could you please help me out this.
thanks in advance,
Mervin Thomas
How can I use this code to take capture user screen.
Like print screen button do it?
Thanks
It’s not possible to capture desktop screen from Flex yet. You would need a software running on the desktop to take screenshot. Last I checked, it’s not even possible with AIR. But is a feature that may come in future.