Crop image in flex using a non-rectangular shape

Question

Hi I've been following this tutorial to crop images in flex: http://code.mediablur.com/ImageCropper/ImageCropperDemo.html.

At the heart of its cropping is using a method called "copyPixels". However, this method takes as one of its arguments a rectangular shape for its crop region. Are there other strategies I can use to crop it not using a rectangle.

I am going after letting the user specify the region that should be cropped using a series of points.

Answer 1

The resulting image has to be a rectangle, of course, but you can mask with transparency using BitmapData.draw and BlendMode:

var originalImage:BitmapData; // defined
var maskPath:GraphicsPath; // defined

var maskShape:Shape = new Shape();
maskShape.graphics.beginFill(0, 0); // fill region with transparent
maskShape.graphics.drawRect(0, 0, originalImage.width, originalImage.height);
maskShape.graphics.endFill();

maskShape.graphics.beginFill(0xFF0000);
maskShape.graphics.drawPath(maskPath.commands, maskPath.data, maskPath.winding);
maskShape.graphics.endFill();

var resultImage:BitmapData = originalImage.clone();
resultImage.draw(maskShape, null, null, BlendMode.ALPHA);

For cropping, you would probably do something more fancy in the last few lines--copying a region instead of cloning the whole originalImage, and/or applying a transform when applying the maskShape.

(I believe it's necessary to use a DisplayObject to use BlendModes, but that's not clear in the documentation.)