DisplayObject snapshot in flex 3

Question

i'm creating a visual editor in flex and need to let users export thier projects into Image format. But i have one problem: size of the canvas is fixed and when user add element which is out of these sizes some scroll bars added. And user continue working on the project. but when he want to take snapshot of the canvas he just get the visible part ot the canvas with scrollbars. how to get image of the fullsize canvas?

The only solution i found is to check the positions and sizes of canvas child objects and rezise it to fit them. then take snap and resize back. But it hmmmm... too complicated i think. Is there some "easy methods"?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
 <![CDATA[
  import mx.graphics.ImageSnapshot;

  private function SnapshotButtonHandler():void
  {
   var snapshot:ImageSnapshot = ImageSnapshot.captureImage(AppCanvas);
   var file:FileReference = new FileReference();
   file.save(snapshot.data, "canvas.png");
  }
 ]]>
</mx:Script>
<mx:Canvas id="AppCanvas" width="800" height="300" backgroundColor="0xFFFFFF">
 <mx:Box x="750" y="100" width="100" height="100" backgroundColor="0xCCCCCC" />
</mx:Canvas>
<mx:Button id="SnapshotButton" label="take snapshot" click="SnapshotButtonHandler()" /> 
</mx:Application>

Answer 1

i would put one container into the scrollable canvas, that adapts it's size according to objects in it ... maybe even UIComponent would do the trick ... then do a snapshot of that container ... the canvas only adds the scrollbars, so to speak ...

Answer 2

Solution i found

BaseCanvas - canvas with fixed height and width EditCanvas - dynamic canvas which params depends on it's children position.

Snapshot takes from EditCanvas. Here part of code

private function SnapshotButtonHandler():void
{
    var snapshot:ImageSnapshot = ImageSnapshot.captureImage(EditCanvas);
    var file:FileReference = new FileReference();
    file.save(snapshot.data, "canvas.png");
}
private function ResizeCanvas():void
{
    for each (var child:* in AppCanvas.getChildren())
    {
        if ((child.x + child.width) > AppCanvas.width)
            AppCanvas.width = child.x+child.width;
        if ((child.y + child.height) > AppCanvas.height)
          AppCanvas.height = child.y+child.height;
    }
}

<mx:Canvas id="BaseCanvas" width="300" height="200">
 <mx:Canvas id="EditCanvas" width="300" height="200" backgroundColor="0xFFFFF0" horizontalScrollPolicy="off" verticalScrollPolicy="off"/>
</mx:Canvas>

Answer 3

Why my flex builder says Undefined method save() in FileReference. any idea???

My component(Canvas) width is 84600, only its 900 pixel viewable at a time, So how to take snapshot of such component ? And how to draw taken snapshot to (another)canvas ??

Answer 4

krishna: make sure you're targeting flash player 10 in your build path.