Image Cropping using Flex

[kalyanvarma]

Hi All,

Can anyone help me with an approach to do image cropping using Flex? It is really helpful if I can get it fast.

Thanking you in advance.

[slaingod]

You can either use image x/y and height/width to just show the portion of the image you desire, you can check into using the BitmapData.copyPixels method to copy a portion of one image into a new one.

[kalyanvarma]

Hi Slaingod,

Thanks for you reply. But the requirement here is the user should be able to
select the area and get the image of the desired area he selects. So, how to
get that select tool.

Thanking you in advance.

[slaingod]

You can use mouse events and anything that draws a rectangle (even Canvas or
TextArea) and use the borders for your selection.

I'm sure if you did a google for Flex selection rectangle there would be
examples. Quasimod has an old AS2 one for 'marching ants' selection, that
could be adapted.

Here is some partial code that will get you going...may not contain everything
you need, but certainly shows the important pieces...

private var origin:Point = null;
private var release:Point;
private var lastMouseCoords:Point = new Point();

public function onPicMouseDown(e:MouseEvent):void {
pic_selection.addEventListener(MouseEvent.MOUSE_MO VE, onPicMouseMove);
pic_selection.addEventListener(MouseEvent.MOUSE_UP , onPicMouseUp);
pic_selection.addEventListener(MouseEvent.ROLL_OUT , onPicMouseOut);
selection.visible = true;
selection.width = 4;
selection.height = 4;
origin = new Point(pic_selection.x + e.localX, pic_selection.y + e.localY);
selection.x = origin.x;
selection.y = origin.y;
}

public function onPicMouseUp(e:MouseEvent):void {
release = new Point(pic_selection.x + e.localX, pic_selection.y +
e.localY);
selectionDone();
}

private function selectionDone():void {
pic_selection.removeEventListener(MouseEvent.MOUSE _MOVE,
onPicMouseMove);
pic_selection.removeEventListener(MouseEvent.MOUSE _UP, onPicMouseUp);
pic_selection.removeEventListener(MouseEvent.ROLL_ OUT, onPicMouseOut);
crop_instructions.visible = false;
story.visible = true;
if(Math.abs(origin.x - release.x) < 5 || Math.abs(origin.y - release.y) <
5) {
origin = null;
release = null;
selectionReset()
}
}

public function onPicMouseOut(e:MouseEvent):void {
release = new Point(lastMouseCoords.x, lastMouseCoords.y);
selectionDone();
}

private function selectionReset():void {
selection.x = 0;
selection.y = 0;
selection.height = 0;
selection.width = 0;
selection.visible = false;
}

public function onPicMouseMove(e:MouseEvent):void {
lastMouseCoords.x = pic_selection.x + e.localX;
lastMouseCoords.y = pic_selection.y + e.localY;

// drag the selection rectangle
selection.x = Math.min(pic_selection.x + e.localX, origin.x);
selection.y = Math.min(pic_selection.y + e.localY, origin.y);

// we could make it a square by setting height and width to minimum
// but lets leave it for now... maybe someone wants to crop kids out
selection.width = Math.abs(pic_selection.x + e.localX - origin.x);
selection.height = Math.abs(pic_selection.y + e.localY - origin.y);
}