2

Im currently trying to work the imageSnapshot function in flex. Ive been looking hard but I cant seem to find a solution to my problem. I wish to take a screenshot of one of my components, to capture the final output of my program, since a plain "printscreen" cuts off some of the output due to it scrolling. My current code looks like -

<mx:ApplicationControlBar dock="true">
    <mx:Button label="Take snapshot of Profile" 
        click="takeSnapshot();" />
</mx:ApplicationControlBar> 

Which when called does -

private function takeSnapshot(even:Event=null):void {
    var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(viewstack1);

Now i think this is taking the image of the viewstack which I want... But Im stumped on what to do from here! Is it not possible to now just copy the image to the clipboard, or produce a new window in my browser with the entire image inside? If anyone has any other way to do this, suggestions would be wonderful.

Thank you for your time.

2 Answers 2

4

You could draw the viewstack into a BitmapData object and encode it to png using as3corelib. Something like:

var screenshotData : BitmapData = new BitmapData(viewstack1.width, viewstack1.height, true, 0x00000000);
screenshotData.draw(viewstack1);
var outputData:ByteArray = PNGEncoder.encode(screenshotData);
// Save outputData as a file to disk, send to webserver etc..

edit: Uhh, this probably confuses you even more. Sorry about that. ImageSnapshot has a property called data, which i'm guessing gives you pretty much the same result as this. You could save it as a file to disk using flash.net.FileReference

4
  • I tried to use the flash.net.FileReference save method, but its not even picking it up. I have the FileRefence.upload and download options like mentioned in the link, but not the .save or .load. Im using Flex 3.4 ... sorry if Im overlooking something simple, really new to this.
    – Emma
    Oct 7, 2009 at 23:30
  • Ok My own silly fault. I fixed that but it still didnt do what i wanted. Its making a picture, but its only really making a picture of the screen i can see, i wanted a picture of the entire component, even the cut off parts. Any help there?
    – Emma
    Oct 7, 2009 at 23:54
  • If you get the width and height parameters right in the constructor of the BitmapData object, you should get the whole component, even if you can't see all of it. Oct 8, 2009 at 0:20
  • Looks like ImageSnapshot is pretty versatile - it's designed to allow images with widths of up to 8192 pixels (up from 2580 for normal BitmapData objects). However, it looks like it always cuts off images if they go off screen. You might want to consider using the BitmapData method that Antti and I have used to get around this. Oct 8, 2009 at 0:38
2

I built on Antti's example to make a working component (with full code), which you can view here. You can print pretty much any component you like (I've got an image and a datagrid there).

All you need to add to Antti's code is this:

var fr:FileReference = new FileReference();
var encoder:PNGEncoder = new PNGEncoder();

//Antti's code here

fr.save(outputData,"datagrid.jpg");

That will open up a file save dialog for you.

Cheers, Casp

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.