Image Cropping in Flex

Even though there are many posts on this particular topic still there are many ???, then i thought may be i can write about it, so lets get started.

Lets do things in steps.

1. Load Image in to Flex App
2. Convert it to Bitmap and BitmapData objects.
3. Crop Image using BitmapData object

1.Load Image in to Flex App

private var imageLoader:Loader = new Loader();

private function fnInit():void
{
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImageComplete);
imageLoader.load(new URLRequest(“assets/flower.png”));
}

2.Convert it to Bitmap and BitmapData objects

private var bitmapImage:Bitmap;
private var bitmapDataImage:BitmapData;

//Event.COMPLETE eventHandler for Loader

private function loadImageComplete(e:Event):void
{
bitmapImage = Bitmap(e.target.loader.content);
bitmapDataImage = Bitmap(bitmapImage).bitmapData.clone();
}

3.Crop Image using BitmapData object

//Specifying the dimensions for Image cropping

private var WIDTH:Number=200;
private var HEIGHT:Number=150;
private var X:Number=50;
private var Y:Number=50;

private function getCroppedImage():BitmapData
{
var croppedBitmapData:BitmapData = new BitmapData(WIDTH, HEIGHT, false);
croppedBitmapData.copyPixels(bitmapDataImage, getImageRect(), new Point(0, 0));
return croppedBitmapData;
}

private function getImageRect():Rectangle
{
var requestedRect:Rectangle;
requestedRect = new Rectangle(X, Y, WIDTH, HEIGHT);
return requestedRect;
}

here the function getCroppedImage() returns the cropped Image BitmapData.And to see the cropped Image assign it to source of Image like below.

var croppedBitmap:Bitmap = new Bitmap(getCroppedImage());
image.source=croppedBitmap;//image is ‘id’ of Image

To better understand the Post i recommend reading Bitmap and BitmapData classes.

View Demo

Download Code

Enjoy the Post.