How to crop with AS3
Quick post; How to crop a bitmap / displayobject / Movieclip / Sprite or just the stage with Flash/AIR/AS3.
function crop( _x:Number, _y:Number, _width:Number, _height:Number, displayObject:DisplayObject = null):Bitmap
{
var cropArea:Rectangle = new Rectangle( 0, 0, _width, _height );
var croppedBitmap:Bitmap = new Bitmap( new BitmapData( _width, _height ), PixelSnapping.ALWAYS, true );
croppedBitmap.bitmapData.draw( (displayObject!=null) ? displayObject : stage, new Matrix(1, 0, 0, 1, -_x, -_y) , null, null, cropArea, true );
return croppedBitmap;
}
Usage:
var myCroppedImage:Bitmap = crop( 100, 100, 200, 200 );
this.addChild ( myCroppedImage );
Download
» Download CropUtil class on googlecode.
Custom shapes
If you need to crop a Sprite with a irregular shape, you should use a mask. When you have used a mask and also want to crop it, put the MovieClip and the shape in a container, and use the container as argument in the crop function.
Save the cropped image
To save the capture, consider using my ImageSaver class
nice work. Its really helpful.
it automatic take widh & height from Object. If you add option to add width & height custom & save according to that size that will be more helpful. (e.g resize).
great – thanks
Hello:
It is posible crop google Maps to a Bitmap in Flash. or Yahoo Maps. I have more problems with the api of google maps because when you put the map the display object have a mask but is more big.
thanks for all
@israel: Did you try it? I think it is possible, because I think the google map (in flash) is a displayobject too. Only thing is that is wont update, till you crop again. I guess cropping each frame is cpu intensive. this crop is not suppose to be mask.
Please also take a look at this: http://code.google.com/apis/maps/faq.html#bitmapdata
thank for this great tips, its very helpful.
Hello,
I have gone thru some of examples and i find them interesting.
I am trying to develop a crop tool having rectangle, circular, triangular kind of shapes. I did the
rectagular crop using copyPixel(). But I am not getting the other crop-shapes.
Can you help me out of this problem by giving suggestions or some hints.
I hope you will.
rgds,
Satish
If you used copyPixel(), then you have a bitmap object? imagine your bitmap is named myBitmap, then this would be the code:
var myCroppedImage:Bitmap = crop( 100, 100, 200, 200, myBitmap );
this.addChild ( myCroppedImage );
I’m trying to use this class but I am getting a “1180 call to possibly undefined method crop” I am just doing a test to play with it so Im using the code example above.
import nl.stroep.utils.*
var myCroppedImage:Bitmap = crop( 100, 100, 200, 200 );
this.addChild ( myCroppedImage );
what am I screwing up?
Oh add I’m trying to copy a portions of the stage.
Ok got it too a look at the as file. the displayObject is the first method in the function not the last. This is a great little script very cool.
First, let me say that you are a god!
I was struggling with this, and would not have figured it out on my own.
Second, let me offer up something useful.
I needed this because of problems with masking, and I needed my cropped image to maintain its transparency. Substituting this small change into your code will make it preserve any existing transparency:
var croppedBitmap:Bitmap = new Bitmap(new BitmapData(_width, _height, true, 0x00000000), PixelSnapping.ALWAYS, true);
Thanks, I was using a mask to do this kind of thing but then when I started using papervision I needed it to be literally that size and not just visibly that size. Genius work btw lol
Method “copyPixels” is more fast…
/**
*
* @param $cropArea
* @param $source
* @param $transparent
* @param $fillColor
* @return
*/
public static function crop( $cropArea:Rectangle, $height:Number, $source:BitmapData, $transparent:Boolean=false, $fillColor:uint=0x00FF00FF ):BitmapData{
if( $source==null ) return new BitmapData(0,0,$transparent,$fillColor) ;
//
var data :BitmapData= new BitmapData($cropArea.width,$cropArea.height,$transparent,$fillColor);
data.copyPixels($source,$cropArea,new Point(0,0));
return data ;
}
//
And this one, crop and resize…
/**
*
* @param $target
* @param $source
* @param $cropArea
* @param $colorTransform
* @param $blendMode
* @param $smoothing
* @return
*/
public static function transform( $target:BitmapData, $source:BitmapData, $cropArea:Rectangle=null, $colorTransform:ColorTransform=null, $blendMode:String=null, $smoothing:Boolean=true ):BitmapData{
if( $target==null || $source==null ) return null ;
//
$cropArea= ($cropArea)? $cropArea : $source.rect ;
//
var matrix :Matrix= new Matrix();
matrix.a= $target.width/$cropArea.width ;
matrix.d= $target.height/$cropArea.height ;
matrix.tx= -$cropArea.x*matrix.a ;
matrix.ty= -$cropArea.y*matrix.d ;
//
$target.draw( $source, matrix, $colorTransform, $blendMode, $target.rect, $smoothing ) ;
return $target ;
}
if you want crop any image, than i will suggest you to visit the link below
http://www.raiseitsolutions.com/forum/viewtopic.php?f=4&t=2
if you visit this link, you will know how to crop an image easily
thank you very much. 🙂
Hi, I tried this but got these errors:
1120: Access of undefined property _x.
1120: Access of undefined property _y.
I imported the Matrix class. Why do you think it’s throwing this error?
Hi Cal, how do you call the crop function?
I want to crop image in irregular shape.
How can I acheive this.
Thanks in Advance.
Hi Swaroop, you should mask the image with the custom shape and then use the crop function I guess..
Hi Mark,
Thanks a lot for reply.
In my scenario I cant mask the image. Complete image should be visible to user. There is another transparent movieclip having irregular shape in it. I am placing this movieclip on my main image. User will drag, scale and rotate the image, so that some part of image will fit in that irregular shape.
When I call the crop function, I am getting a bitmap but it is having white background. This white background is coming because my shape is not at 0,0 (x,y) inside movieclip. When I place the shape at 0,0 location inside the movieclip, I get what I want but I dont want to keep shape at 0,0 inside movieclip.
Please help.
Thanks for offering this code. Much apprciated
-Matt
I’m not sure if I can use this yet…
I need to crop a Sprite but I need the result as a Sprite as well , not a Bitmap.
Is this possible ?
I’m thinking maybe you can get a Sprite from the resulting Bitmap … just don’t know how
If you need to crop a Sprite and keep it as a Sprite, then you’ll need a normal mask. BTW a Bitmap is a displayobject, so it can be added to the stage.