Export to Jpeg in flex.

Vikram singh — Fri, 13 May 2011 05:05:47 +0000

There is always a need to way to export some sort of a report out to the user, previously I used the classical use of a serverside script in Java or PHP to enable user to take a screenshot of the component or the entire application. Since the flash player 10 provides the feature to save local file using file reference I am going to exploit that feature and export some BITMAP content into a Jpeg file.

following is the code for taking a snapshot of the component on some event/action

Prerequisite for making this components work.

Build project in flex 4.0 + SDK
Use flash player 10 and above (MUST)
Include Corelib.swc for JPEGEncoder to work

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//file reference declaration to enable user to save file to local system.
private var file:FileReference = new FileReference();

//function can be called on button click or context menu click or any other interaction
private function captureIt():void{
var df : DateFormatter = new DateFormatter();
df.formatString = "DD-MM-YY HH:NN"
var bitmapData:BitmapData = new BitmapData(this.width, this.height);
bitmapData.draw(this,new Matrix());
var bitmap : Bitmap = new Bitmap(bitmapData);
var jpg:JPEGEncoder = new JPEGEncoder();
var ba:ByteArray = jpg.encode(bitmapData);
var dt : Date = new Date();
var dtStr : String = df.format(dt.time);
file.save(ba,'Screenshot at'+dt.time+'.jpg');
}

Explanation

BitmapData ()
The BitmapData () function takes a height and width of the component which has to be converted to image, i have used this you can very well use any UIComponent or DisplayObject.

bitmapData.draw(this,new Matrix ());
This is the place where the actual conversion takes place (where the bitmap data is drawn), Again you can use any UIComponent or DisplayObject in this place.

Bitmap Encoding: jpg.encode (bitmapData);
The component or screen area to be captured is converted into BITMAP data so that it could be encoded into Jpeg file format for saving it, you can also use a PNG or GIF encoder in this place as per your requirement. At this place the Bitmap data is encoded into a JPEG file format.

var ba : ByteArray = jpg.encode (bitmapData);
Since BITMAP data cannot be saved directly to the local system we first convert it into a ByteArray.

Date : dt.time
The date is only used to give each screenshot a unique timestamps so that each time the function is called a new file is saved.

file.save ( ba,’Screenshot at’+dt.time+’.jpg’ );
Now we pass the byte array to the file reference and also pass the name by which the file has to be saved, as shown in the function above.

Vollia you can now save JPEG file to your local file system via Flex without using any third party Serverside script to do so. No more HTTP request and error handling to take care of.

GO MAKE THE WORLD A BETTER PLACE
Say no to paper, No need to print graphs when you can save them to jpeg

Caching images in Flex

Vikram singh — Mon, 25 May 2009 09:27:54 +0000

Caching of image data in your Flex application is one of the best ways to avoid loading those large images again and again, and this can improve performance and reduce overhead of loading external resources.

We are not discussing about using the cacheAsBitmap property to improve rendering performance or the cachePolicy property to speed up animations. Its the caching of actual bitmap data of an image. As the 2 are different in one case we just cache the image data of an image that has to be animated and component doesnot reload any image. in the other case we reload the data on demand for example user profile with display picture. In this case the picture mostly does not change (well it does but we can handle it differently) so we dont need to reload the image at each time the user profile data of the same person is called.. so we can impliment a cache here.

You’ll need a hash map to store the image data. A Dictionary or an associative array will also work just fine. Loading an image for the first time is the same as usual. You create a new Image object and add a listener for the COMPLETE event or it could be any of your custom event for the sake of example we will follow :

var image : Image = new Image ();
image.addEventListener (Event.COMPLETE, onImageLoad);

Once the image has finished loading, you add a copy of the bitmap data to the hash map using the image URL as the hash key as the URL for any image will always be distinct:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

private var imageCache : hashMap = new hashMap();
// create hashmap only once

private function onImageLoad (event : Event) : void{
var image : Image = event.target as Image;
var imageURL : String = image.source;
if (! imageCache.containsKey (imageURL))
{
var bitmapData : BitmapData = new BitmapData
(image.content.width, image.content.height, true);
bitmapData.draw (image.content);
imageCache.put (imageURL, bitmapData);
}
}

The above method is called and the image is cached in the hash map. Now you can use the image as many times as we want without ever having to load it again. A good exapmle of this could be loading user profile whenever you reload the profile data one need not fetch the user profile picture. the picture can directly be accessed from the hashmap.

How do we use the image we stored, Its simple you need to check the hash map each time you call for the loading the image just check if you’ve already cached it:

1
2
3
4
5

// check the hashmap when ever next you want to load the image

if (imageCache.containsKey (imageURL)){
image.source = new Bitmap (imageCache.getValue (imageURL));
}

thats it now you can use the cache whenever required.