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: 18012
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