take snapshot of display object visible area in flash

Question

I have camera input app in flash (AS3) and I draw some graphics over it. I want to take the image snapshot of the stage visible area but only the video an graphics I draw over video. I want to exclude controls from the image snapshot. My display object layout is in following relation:

-stage
 --canvas (Sprite)
  ---video (Video)
  ---overlayed graphics (Sprites, MCs, Shapes)
 --controls (Buttons)

Stage size is fixed and I want to take a image snapshot of everything that is child of my canvas element (camera input video and overlayed graphics, but excluding controls). I am able to make this image snapshot when overlayed graphics are inside the bounds of stage size. I do it like this:

var bmpd:BitmapData = new BitmapData(canvas.width, canvas.height);
bmpd.draw(canvas, new Matrix(1, 0, 0, 1, canvas.x, canvas.y));

But this gives me unwanted result when graphics which I draw on top of video on canvas exceed the bounds of stage display area. How do I limit the image snapshot only in the bounds of visible area inside stage?

Thanks

score 2 · Accepted Answer · answered Jul 28 '11 at 12:16

what i've done in the past is use the as3corelib, which contains encoder classes for both JPG (JPGEncoder.as) and PNG (PNGEncoder.as) image files. these classes makes it quite effortless to create image files from your display objects.

here's the code from one of my programs which saves a .png of my entire stage and all of it's children to the local disk using FileReference.

//Save Canvas Snapshot
private function saveCanvasSnapshot():void
    {
    var bitmapData:BitmapData = new BitmapData(DropSwatch.controller.stage.stageWidth, DropSwatch.controller.stage.stageHeight);
    bitmapData.draw(DropSwatch.controller);
    var file:ByteArray = PNGEncoder.encode(bitmapData);

    var fileReference:FileReference = new FileReference();
    fileReference.save(file, "DropSwatchCanvas.png");
    }

in your case, since you want all of your layers except for the controls, you could simply make the controls layer invisible while drawing the biamapData and make them reappear afterwards. then encode your bitmapData using PNGEncoder (or JPGEncoder), assign it to a ByteArray and save the byteArray as an .png (or .jpg)

+1 as3corelib mention. Fantastic library that appears to understated — Chris, Jul 28 '11 at 12:56

score 0 · Answer 2 · answered Jul 28 '11 at 10:54

0

draw(source:IBitmapDrawable, matrix:Matrix = null, colorTransform:flash.geom:ColorTransform = null, blendMode:String = null, clipRect:Rectangle = null, smoothing:Boolean = false):void

Set clipRect parameter according to canvas size(set width and height equal your canvas width and height).

answered Jul 28 '11 at 10:54

Timofei Davydik

7,244
7
33
59

Does clipRect work the same as Matrix for setting the coordinate origin of where to draw or does it only use the width/height of the rectangle to draw from 0,0? Can't recall off the top of my head, I was under the impression in order to draw a specific at a point you needed a translation matrix as a draw param. – Jul 28 '11 at 14:19

score 0 · Answer 3 · answered Aug 20 '11 at 20:16

bitmapData.copyPixels() would allow you to get a subrectangle of the pixels in bmpd.

That's two steps to do what I am sure clipRectangle in draw would do in one step, but I had exactly this problem yesterday and couldn't get clipRectangle to function properly so I just resorted to doing this instead.

take snapshot of display object visible area in flash

3 Answers3