Take the 2-minute tour ×

I am trying to save a component as a JPG file and I can't seem to get the BitmapData.draw() to give me the pixels I'm expecting and instead I am seeing a plain white rectangle when I open the resulting JPG file. I am first creating an object which contains an image and a caption (the MultigraphCanvas below) and when I display the object as a pop up it looks perfect -- however when I try to draw it as a bitmap and then encode and save it as a JPG I don't end up with the same image I can display on the screen. Here's the code:

        private function saveAsFile(title:String):void
            // make a canvas containing the multigraph and title
            var multigraphCanvas:MultigraphCanvas = new MultigraphCanvas();
            multigraphCanvas.multigraphGroup = multigraphGroup;
            multigraphCanvas.titleText.text = title;


            var matrix:Matrix = new Matrix()
            matrix.tx = 0;
            matrix.ty = 0;
            var multigraphCanvasBitmapData:BitmapData = new BitmapData(multigraphCanvas.width, multigraphCanvas.height, true, 0xffffffff);
            multigraphCanvasBitmapData.draw(multigraphCanvas, matrix);
            var multigraphCanvasImage:Image = new Image();
            multigraphCanvasImage.load(new Bitmap(multigraphCanvasBitmapData));
            multigraphCanvasImage.content.width = multigraphCanvas.width;
            multigraphCanvasImage.content.height = multigraphCanvas.height;
            var multigraphCanvasImageBitmapData:BitmapData = new BitmapData(multigraphCanvas.width, multigraphCanvas.height, true, 0xffffffff);

            // DEBUGGING
            PopUpManager.addPopUp(multigraphCanvas, this);

            // DEBUGGING
            var debugImage:Image = new Image();
            debugImage.source = multigraphCanvasImageBitmapData;
            var debugTitleWindow:TitleWindow = new TitleWindow();
            PopUpManager.addPopUp(debugTitleWindow, this);

            // encode the canvas bitmap into a JPG byte array
            var jpgEncoder:JPEGEncoder = new JPEGEncoder(85);
            var jpgByteArray:ByteArray = jpgEncoder.encode(multigraphCanvasImageBitmapData);

            // save the JPG byte array as a file
            var fileReference:FileReference = new FileReference();
            fileReference.save(jpgByteArray, title + ".jpg");

Can I expect for the BitmapData.draw() method to draw each component of the display object it's passed, or does it just render the topmost element and none of the children (this is what it looks like to me)?

share|improve this question

3 Answers 3

I believe that components need to be in the display tree for BitmapData.draw() to be able to render them.

share|improve this answer
How do I get them into the display tree? Add the component as a child or element of the component which is a displayed object? –  James Adams Apr 1 '11 at 16:17

I have been up for the last 24 hours so if the function is broke don't blame me :) This is a stripped down version of a function I have that takes a snapshot of the container(c1) and sends it off to the server. I was base64 encoding as that was what the Java guy wanted for the back-end. You will have to massage the setting for your needs. I cut out a lot of the stuff I had in this function

private function getSnapShot( e:MouseEvent ):String{
  var matrix:Matrix = new Matrix()
  matrix.tx = 0;
  matrix.ty = 0;
  var finished1:BitmapData = new BitmapData(this.c1.width,this.c1.height,true,0xffffffff);
  finished1.draw( this.c1, matrix  );
  var myImage:Image = new Image();
  myImage.load( new Bitmap(finished1) );
  myImage.content.width = this.c1.width;
  myImage.content.height = this.c1.height;
  var finished:BitmapData = new BitmapData(this.c1.width,this.c1.height,true,0xffffffff);
  myImage = null;
  var encoder:JPEGEncoder = new JPEGEncoder();
  var data:ByteArray = encoder.encode(finished);
  var b64:Base64Encoder = new Base64Encoder()
  b64.encodeBytes( data )
  return b64.toString();

you probably only need to return "data" which is the JPG

share|improve this answer
Basically you need to create a bitmapData Object to the size you want. Then draw the container into it. Then load the bitMapData into an image object. And finally encode it how you like –  The_asMan Apr 1 '11 at 16:24
oh yeah forgot that you need to create a second bitMapData from the Image object you just created this is the key part you are missing –  The_asMan Apr 1 '11 at 16:31

Check the registration point of the source display object container.

Let's imagine the following scenario:

The display object container contains a visual like a rectangle and this DisplayObjectContainer has the registration at the bottom left so no content is available at x,y = 1,1.

BitmapData.draw would copy the content starting from 0,0(if you don't specify otherwise via a matrix translation) so you will get an empty white area(or the default fill color of the BitmapData)

share|improve this answer

Your Answer


