email: godds@scottlogic.co.ukThe ability to allow a user to save a Flex chart, or in fact any Flex UI component, as an image has popped up on my radar several times over the last few years. Solutions to the problem have generally involved producing a pop-up window with the UI component as an image that the user can then save, either by bouncing the information off a server (James Ward – RIA Cowboy and Flex Cookbook) or interacting with JavaScript (Doug McCune). However, additions made to the framework in Flex 3 combined with new features of Flash Player 10 have made these cumbersome techniques redundant. It is now possible to provide this functionality directly from your Flex application in two simple steps.
The first step involves capturing the UI component’s bitmap information. The Flex 3 API introduced the ImageSnapshot class specifically to simplify this process. The following line of code is sufficient to capture the image data:
ImageSnapshot.captureImage(myChart);
However, we are able to control the image capturing more precisely by using some of the method’s optional parameters. These allow us to specify the target resolution in dots per inch and the image encoder to use (the Flex 3 API provides a PNGEncoder and a JPEGEncoder). So, for example, the following line of code would capture a chart as a PNG image at a resolution of 300dpi:
ImageSnapshot.captureImage(myChart, 300, new PNGEncoder());
Now that we have captured the image data all that remains is the second, and last, step: saving the image data to the user’s file-system. Flash Player 10 introduced a number of changes to its security sandbox, principally the ability to programmatically prompt the user
to save a file to their file-system. This is done using the FileReference class, as shown in the following lines of code:
var file:FileReference = new FileReference(); file.save(image.data, "chart.png");
So, putting the steps together results in a method along the lines of the following code snippet:
/** * Attempts to save the chart to the user's file-system. */ private function saveChart():void { var image:ImageSnapshot = ImageSnapshot.captureImage(myChart, 300, new PNGEncoder()); var file:FileReference = new FileReference(); file.save(image.data, "chart.png"); }
The application below shows this code in action. The values in the data grid can be changed,
with the changes reflected in the chart (just to show that I’m not cheating).
The source code is now available.
Congratulations for this post!
Excellent explanation.
It came to be extremly useful to me!
[]‘s
The above code doesnt works for me.
It shows the error message on the line
file.save(image.data, “chart.png”);
as follows:
1061: Call to a possibly undefined method save through a reference with static type flash.net:FileReference.
I am using flex builder3
It seems like there is no save method available in FileReference class.
As mentioned in the post, this functionality is only available when targeting Flash Player 10. Since you are using Flex Builder 3, I suspect the project is set to target Flash Player 9 as this will be the default. To change check/change the Flash Player version, go to Flex Compiler in the project’s properties and check/set the Adobe Flash Player Options section appropriately.
I hope this helps.
Regards,
Graham
Great! Thanks!
Fantastic, thanks!
Hi
Is there any way to add the title to image.
for eg:’Line Chart’ to Top of Image when printing the image?
Thanks, pretty straight forward and works without any glitches!!
Hi,
Yes, this is relatively straightforward to do. The described technique works for any UIComponent, not just charts. So, for example, you could pass a VBox with a label containing the title and the chart to ImageSnapshot.captureImage, thereby obtaining an image with the chart and a title. There is an alternative, more involved, approach involving manipulation of BitmapData, but it sounds like the simple solution will work for you.
Graham
yes..that worked thanks..
can you tell how it can be done by manipulating BitmapData??
hi..
i have the same problem with Navin Seksaria
i already change the flex compiler to flash player 10
and i still got the problem
error message on the line
file.save(image.data, “chart.png”);
I am using flex builder3
hi..
i have the same problem with leontine
i already change the flex compiler to flash player 10
and i still got the problem
error message on the line
file.save(image.data, “chart.png”);
In save dialog box , Save as types are not coming, how to load those types in flex.
How to fill the Save as dialog box in the above example, like jpg , png
Unfortunately the Flash API does not expose the ability to control this at all. See http://stackoverflow.com/questions/6538988/alternative-to-locking-file-type-on-filereference-save-as3.