Converting a flex component w/images to bitmap

Question

I am trying to take images I am placing in a flex canvas component to a bitmap. I was able to get to the point where I'm not getting an error but then no image shows up and the image I save out as a jpg is blank. I imagine I'm not setting the bitmap data correctly but can't figure out what I am doing wrong.

Here is the code where I am converting it to a bitmap:

var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(_renderPop);
   var imageByteArray:ByteArray = imageSnap.data as ByteArray;
   var bLoader:Loader = new Loader();
   bLoader.loadBytes(imageByteArray);

   var bmd:BitmapData = new BitmapData(500,500);
   bmd.draw(bLoader);

   var imgTest:Image = new Image();
   imgTest.source = bmd;
   _renderPop.renderCanvas.addChild(imgTest);



   var fileRef:FileReference = new FileReference();
   fileRef.save(bLoader, 'testImage.jpg');

_renderPop.renderCanvas is where I am placing the images. Anybody see anything wrong?

Answer 1

Hi pfunc

In your code:

var bLoader:Loader = new Loader();
bLoader.loadBytes(imageByteArray);

...you're assuming that the bytes are being loaded immediately; try putting an event listener on the loader as follows:

bLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);

private function completeHandler(event:Event):void
{
    // ... the rest of your code goes here
}

The loadBytes functions works like the load function in that they are both asynchronous processes so you'll need the event listener. It is a little counter-intuitive, and i've made the same mistake myself several times.

If that doesn't work, maybe leave out the contentLoaderInfo property, but the above should work...

Let me know if you come right :)