Crop bitmapdata under mask to create new bitmap AS3

So you want to be able to crop an image based on what is viewable through the mask and then saved that cropped image out to a new file. For two days I played about with code to trying to get this to work. The main problem for me was that the image would be dragged about underneath the mask. This was proving a bit confusing for me in getting the coordinates to crop from. Well thankfully I was able to get it to work the way I wanted. So now that I have it working I thought I would share the code as whilst doing research for a solution I didn’t find anything of real use.

  1. function toCrop(e:Event):void {
  2.  //Matrix to holder the area to be cropped
  3.  var maskRect =mcHolder.mcMask.getBounds(mcHolder);
  4.  //Matrix of image to be cropped
  5.  var imgMatrix= mcHolder.mcImg.transform.matrix;
  6.  //Cropped image
  7.  var myCroppedImage:Bitmap = crop(maskRect, imgMatrix, mcHolder.mcMask.width, mcHolder.mcMask.height,mcHolder.mcImg );
  8.  addChild( myCroppedImage );
  9. }
  10.  
  11. function crop( rect, matrix, _width:Number, _height:Number, displayObject:DisplayObject):Bitmap {
  12.  //Create cropped image
  13.  var croppedBitmap:Bitmap = new Bitmap( new BitmapData( _width, _height ), PixelSnapping.ALWAYS, true );
  14.  croppedBitmap.bitmapData.draw(displayObject, matrix , null, null, rect, true );
  15.  return croppedBitmap;
  16. }

Here is an example:
Drag the image around then click “crop image”

Get Adobe Flash player


Source example:

This entry was posted in Flash AS3, Flash general and tagged , , , , , , , , , . Bookmark the permalink.

9 Responses to Crop bitmapdata under mask to create new bitmap AS3

  1. Marcus Moreira says:

    First of all, thanks for sharing the code.
    Would it be possible to use anothar mask, say a Body shaped outline, to crop the image?

  2. Paul says:

    Yes you can use any shape mask you want. But you must remember that your only taking the size of the mask and using that against the visible area of the mask to tell the script where and what to crop. The cropped image does not come out as the shape of the mask. It’s only crops the image so it fits snugly into the mask area.

  3. Mukul says:

    Hi Paul,

    Nice work!
    How can i crop an image of random shape? How will the maskRect equivalent for other shapes eg hexagon or triangle? I am trying to break an image into pieces of random shapes.

    Thnx,
    Mukul

  4. Paul says:

    Hi the cropping doesn’t crop to the shape of the mask only the size. So it doesn’t matter what shape is used. The code only reads x,y,width & height.

  5. Simanas Venckauskas says:

    I was looking for function like this, then I tooked yours and found it a litle bit to big, a litle bit confusing and yor function is fixed to the x and y of mxHolder.

    So I have modifyed your code a litle.
    Check this out, just add Mask and Image you want to crop to the function below.
    The only one restriction is that shape inside of Mask layer have to be x=0, y=0;

    function crop( Mask:DisplayObject, Image:DisplayObject):Bitmap
    {
    var cropArea:Rectangle = new Rectangle( 0, 0, Mask.width, Mask.height );
    var croppedBitmap:Bitmap = new Bitmap( new BitmapData( Mask.width, Mask.height ), PixelSnapping.ALWAYS, true );
    croppedBitmap.bitmapData.draw(Image, new Matrix(Image.scaleX, 0, 0, Image.scaleY, -Mask.x, -Mask.y) , null, null, cropArea, true );
    trace(“Mask.x = “,Mask.x);
    trace(“Mask.y = “,Mask.y);
    return croppedBitmap;
    }

  6. Hello Paul!

    Very nice code!!!
    Can you save the new bitmap to PC?

  7. Yes you would be able to add additional code to the source to display a link to your cropped image which you could then download.

  8. Libin TK says:

    Hello Paul,

    I am very new to AS and your code was very helpful. How do I mask the image with shape like http://i.stack.imgur.com/y26V5.jpg and save an image with transparent background?

  9. Pingback: How can I save a CameraRoll image as a movieclip in AS3? | Question and Answer