How to crop with AS3 (23)

, under actionscript, Code snippets.

Quick post; How to crop a bitmap / displayobject / Movieclip / Sprite or just the stage with Flash/AIR/AS3.
[as]
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;
}
[/as]
Usage:
[as]
var myCroppedImage:Bitmap = crop( 100, 100, 200, 200 );
this.addChild ( myCroppedImage );
[/as]
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

23 responses to “How to crop with AS3”

  1. 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).

  2. martin says:

    great – thanks

  3. israel says:

    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

  4. Mark says:

    @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

  5. thank for this great tips, its very helpful.

  6. satish says:

    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

  7. Mark Knol says:

    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 );

  8. ramel says:

    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?

  9. ramel says:

    Oh add I’m trying to copy a portions of the stage.

  10. ramel says:

    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.

  11. 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);

  12. Jack says:

    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

  13. T3P says:

    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 ;
    }
    //

  14. T3P says:

    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 ;
    }

  15. inzam says:

    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. ๐Ÿ™‚

  16. Cal says:

    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?

  17. Mark says:

    Hi Cal, how do you call the crop function?

  18. Swaroop says:

    I want to crop image in irregular shape.
    How can I acheive this.

    Thanks in Advance.

  19. Mark says:

    Hi Swaroop, you should mask the image with the custom shape and then use the crop function I guess..

  20. Swaroop says:

    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.

  21. Matt says:

    Thanks for offering this code. Much apprciated

    -Matt

  22. Alex says:

    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

  23. Mark says:

    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.

Say something interesting

Please link to code from an external resource, like gist.github.com.