Generating a thumbnail and saving it to disk

This quicktip will show you how to load an image from wherever and how to generate a thumbnail from that image and save it to the disk. In fact, you can use this method to generate screen dumps from any visual component from within Flex.

There are some considerations, first the actual scaling of an image can be done in several ways, the most used trough a scale Matrix. However, in this example I'll be utilizing the Flex library in order to scale the image using smoothing, thereby accomplishing a better result than with simply a Matrix.

Let's say I have loaded an image into a Flex Image component(myImg) and wish to generate a widescreen(16/9) thumbnail for it.

Load the image

myImg.source = "http://graphics8.nytimes.com/images/2006/12/28/business/28dog.xlarge1.jpg";

When the image is finished loading(Event.COMPLETE) we generate the thumb at a size of 200x112

var orgBitmap:BitmapData = new BitmapData(myImg.contentWidth,myImg.contentHeight);

var thumb:BitmapData = new BitmapData(200,112);

orgBitmap.draw(myImg);//Get the orginal image

var scaleImg:Image = new Image();

scaleImg.load(new Bitmap(orgBitmap,"auto",true));//Set smoothing to true

scaleImg.content.width = 200;

scaleImg.content.height = 112;

thumb.draw(scaleImg);//Here we have the scaled image data

Now we have scaled the image using the Image component in Flex which actually does smoothing on the image when scaled. Now we need to convert the bitmapdata into valid JPEG format.

var myjpeg:JPEGEncoder = new JPEGEncoder(80);//Set quality to 80

var thumbdata:ByteArray = myjepeg.encode(thumb);

Now we need to save it to disk(to desktop)

var fl:File = File.desktopDirectory.resolvePath("myimage.jpg");

var fls:FileStream = new FileStream();

fls.open(fl,FileMode.WRITE);

fls.writeBytes(thumbdata);

fls.close();

There you have a smoothed thumbnail waiting for you on the desktop.