flex: Create a screenshot of UI element

Question

I want to make a screenshot of custom as3 ui element (which was extended from Canvas), and then upload the image on the server.

Could you help me with a small example of this?

---

I am trying to do the following:

// This is UI component extended from Canvas
var chessBoard:ChessBoard = new ChessBoard();
    // I displayed pieces on the board, but didn't add it to the stage (I just need a 
    // a screenshot, not need them on the canvas)
    chessBoard.displayPosition(DataStorage.getInstance().getStoredPosition(0));
var img:ImageSnapshot = ImageSnapshot.captureImage(chessBoard, 300, new PNGEncoder());   
var obj:Object = new Object();
    obj.complexity = complexity.value;
    obj.img = img;
httpService.send(obj);

and getting this error:

ArgumentError: Error #2015: Invalid BitmapData. at flash.display::BitmapData() at mx.graphics::ImageSnapshot$/captureBitmapData()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\graphics\ImageSnapshot.as:186] at mx.graphics::ImageSnapshot$/captureImage()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\graphics\ImageSnapshot.as:282] at ui::SendForm/send()[/Users/oleg/Documents/chess_problems/problemme/src/ui/SendForm.mxml:53] at

> ui::SendForm/___SendForm_Button1_click()[/Users/oleg/Documents/chess_problems/problemme/src/ui/SendForm.mxml:16]

This error was caused by missing width and height of the Canvas. I set them and it helped to create bitmap data this way:

var bitmapData:BitmapData = new BitmapData(chessBoard.width,chessBoard.height);
var encoder:PNGEncoder = new PNGEncoder();
var data:ByteArray = encoder.encode(bitmapData); 

I wonder how do I send the image to the server via httpService? Is there a way. Also is data = image file?

Answer 1

Here is a post on someone who has done this exact thing in AS3:

• Dynamically Create an Image in Flash and Save it to the Desktop or Server

Answer 2

It is possible, and although I have never done it, this may be useful to you: http://www.flash-db.com/Tutorials/snapshot/