This is a small working example about how to use an image as a background for a canvas, and how to crop and resize images. I’m sure that there are different approaches to this issue, so you are welcome to add your own solutions.
In order to crop the initial image, that was already loaded as BitmapData object, I use copyPixels method:
cropBD.copyPixels(loadBD, new Rectangle(startPoint.x, startPoint.y, squareSize, squareSize), posPoint);
Argumets explained:
cropBD – my new BitmapData cropBD
loadBD – loaded BitmapData (initial image)
startPoint – the left-top loadBD coordinates from where we start to copy pixels
squareSize – width and height for selection rectangle (in this case it’s a square)
posPoint – the position where pixels will be copy in my new BitmapData cropBD
For resize my new cropped BitmapData I applay a matrix scale transformation:
mtrx.scale( imageView.width/cropBD.width , imageView.height/cropBD.height); imageView.graphics.beginBitmapFill(cropBD,mtrx,false); imageView.graphics.drawRect(0, 0, imageView.width, imageView.height);
Argumets explained:
mtrx – transformation matrix and scale used
imageView – canvas what will have cropped and resized BitmapData as background
In this example you can change the selection square position and size (white square on bottom initial image), when values are changed the the copped and resized image will be updated (top right square).
Full explained code:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initNew()" width="320" height="370"> <mx:Script> <![CDATA[ import mx.controls.Image; private const image_path:String = "fxr.png"; private var loader:Loader; private var request:URLRequest; private var loadBD:BitmapData; private var cropBD:BitmapData; private var startPoint:Point; private var posPoint:Point; private var square: int; private var mtrx: Matrix; private function initNew():void { loader=new Loader(); request=new URLRequest(image_path); loader.contentLoaderInfo.addEventListener( Event.COMPLETE,onComplete); loader.load(request); } private function onComplete(event:Event):void { loadBD = Bitmap(event.currentTarget.content).bitmapData; imageHolder.graphics.beginBitmapFill(loadBD); imageHolder.graphics.drawRect(0, 0, loadBD.width, loadBD.height); imageHolder.graphics.endFill(); //make initial image drawImage(); } private function drawImage():void { //crop square startPoint = new Point(xSelector.value, ySelector.value); square = sizeSelector.value; cropImage(startPoint,square); //resize image and show it resizeImage(); } private function cropImage(startPoint:Point, squareSize:int):void { // Make a new bitmap data using square size cropBD = new BitmapData(squareSize, squareSize, true, 0x00000000); // Position where will be dispayed in the new object, in our case (0,0) posPoint = new Point(0,0); // copy pixels from loaded bitmap data to our new object cropBD.copyPixels(loadBD, new Rectangle(startPoint.x, startPoint.y, squareSize, squareSize), posPoint); //draw crop area selected imageCrop.graphics.clear(); imageCrop.graphics.lineStyle(1, 0xFFFFFF,0.5); imageCrop.graphics.drawRect(0, 0, cropBD.width, cropBD.height); imageCrop.move(imageHolder.x+startPoint.x,imageHolder.y+startPoint.y); } private function resizeImage():void { // make scale matrix mtrx = new Matrix(); mtrx.scale(imageView.width/cropBD.width,imageView.height/cropBD.height); // Fill in image imageView.graphics.clear(); imageView.graphics.beginBitmapFill(cropBD,mtrx,false); imageView.graphics.drawRect(0, 0, imageView.width, imageView.height); imageView.graphics.endFill(); } ]]> </mx:Script> <mx:Canvas id="imageView" x="210" y="10" width="100" height="100" /> <mx:Canvas id="imageHolder" x="10" y="120" width="300" height="240" /> <mx:Canvas id="imageCrop" x="0" y="0" width="0" height="0" /> <mx:Label x="10" y="15" width="60" text="X position"/> <mx:HSlider id="xSelector" x="80" y="10" width="120" minimum="0" maximum="290" snapInterval="10" enabled="true" value="170" change="drawImage()" /> <mx:Label x="10" y="55" width="60" text="Y position"/> <mx:HSlider id="ySelector" x="80" y="50" width="120" minimum="0" maximum="230" snapInterval="10" enabled="true" value="20" change="drawImage()" /> <mx:Label x="10" y="95" width="60" text="Area size"/> <mx:HSlider id="sizeSelector" x="80" y="90" width="120" minimum="10" maximum="240" snapInterval="10" enabled="true" value="100" change="drawImage()" /> </mx:Application>
| ||
| ||
|
Tags: ActionScript, crop, Image, resize
This post was written by Stelian Crisan
Views: 40982
Articles
thanks for the tips and for the code. It was helpful for me because i had a lot of problems by cropping and resizing images.
Thanks for help, its nice
do you have hints how to resize an image by dragging its corners?
thanks
This is exactly what Im looking for Thankyou. Do you know how i might be able to get this cropped image and save it as a jpg?
In order to save the cropped image as jpg file you have to use FileReference class. I don’t have any example as this time, sorry for that.
Hi,
nice post.. thanks for the example.
Ravindra
http://www.rsdhariwal.com
And what about cut rotated area?
That it’s simple
.
In order to rotate the area you have to set the rotation angle to the transformation matrix using rotate method (matrix.rotate).
For a 90 degrease rotation add this line:
Thanks for the above Resize and Crop code. After seen these code only i got an idea to develop my application. Thanks a lot.
Tracy, I wrote a flash app that allows cropping, rotation, red eye removal, control of output image DPI, and output/UPLOAD the resulting JPG to either PHP or COLDFUSION, (but it would work with any server language that can accept a post… it seems ASP classic doesn’t have a simple 3 line solution for uploading files to server… please somebody post ASP code that can!) … if you are interested checkout http://nikkosArt.com/nikkoImage … you will find the PHP and coldfusion code posted there.
Thanks man it help.. do you have any idea how to resize image by draging its corners…plz also help me on this
Is there a way to make selection, like magmatic lasso tool around an image and then crop it and save as a .png file in flex.
Great work,
I was wondering how can I crop image with mouse?
Thanks