Save masked image to server. AS3

Posted on January 19, 2011 by Paul Bainbridge

This is a follow up to my previous post Crop bitmapdata under mask to create new bitmap. In this example I’ve set-up to allow for the cropped image to be saved out from flash to the server. There is also an additional php script to handle the data being sent from flash to create the exported jpg.
Below is the code that is used to save the cropped image to the server and then load it back into flash.

  1. //Save cropped image to the server.
  2. function saveCroppedImage(e:Event):void {
  3.  //Matrix to holder the area to be cropped
  4.  var maskRect =mcHolder.mcMask.getBounds(mcHolder);
  5.  //Matrix of image to be cropped
  6.  var imgMatrix= mcHolder.mcImg.transform.matrix;
  7.  //Cropped image
  8.  var myCroppedImage:Bitmap = cropImage(maskRect, imgMatrix, mcHolder.mcMask.width, mcHolder.mcMask.height,mcHolder.mcImg );
  9.  //Get new matrix of cropped image
  10.  var m:Matrix = myCroppedImage.transform.matrix;
  11.  var urlLoader:URLLoader = new URLLoader();
  12.  //Set jpg quality of the image to be export 1-100
  13.  var myEncoder:JPGEncoder = new JPGEncoder(80);
  14.  //Create jpg to be exported
  15.  var jpgSource:BitmapData = new BitmapData (mcHolder.mcMask.width, mcHolder.mcMask.height);
  16.  jpgSource.draw(myCroppedImage, m);
  17.  //Create byte array to hold jpg data
  18.  var byteArray:ByteArray = myEncoder.encode(jpgSource);
  19.  var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
  20.  //Send image to the server to be saved
  21.  var saveJPG:URLRequest = new URLRequest(_path+"saveImage.php?r="+imgID);
  22.  saveJPG.requestHeaders.push(header);
  23.  saveJPG.method = URLRequestMethod.POST;
  24.  saveJPG.data = byteArray;
  25.  urlLoader.addEventListener(Event.COMPLETE, loadCroppedImage);
  26.  urlLoader.load(saveJPG);
  27. }

Here is an example:
Drag the image around then click “crop image”. The second image that appears has been loaded from the server and clicking on “view in browser” will display the saved image in a new browser window.

Get Adobe Flash player
Source example:

Credits: vamapaull, Photo Booth – Flash Webcam Image Capture (insight into export an image from Flash)

This entry was posted in Flash AS3, Flash general, php, What i am upto and tagged , , , , , , , , , , , . Bookmark the permalink.

2 Responses to Save masked image to server. AS3

  1. wyman yap says:
    December 14, 2012 at 7:50 am

    Hi Paul,

    How to make this work with loaded external image?

  2. Paul Bainbridge says:
    December 14, 2012 at 7:57 am

    Can you be more specific please.