Turning an ImageSnapshot into an Image in Flex

Question

Using Flex 3, I would like to take an image snapshot such as this:

var logoSnapshot:ImageSnapshot = ImageSnapshot.captureImage(logoContainer);

and turn it into something that the Image class can use. I see that there is a property called "data", that holds a byteArray, so I guess my question is: How do I take an image that gets stored as a byteArray and convert it to something the Image class can use to display?

Answer 1

The BitmapData class has:

public function setPixels(rect:Rectangle, inputByteArray:ByteArray):void

Set the rectangle to be the size of your image, and then send in the byteArray.

You should then be able to draw the BitmapData to your screen.

Answer 2

It takes a few steps, but it isn't hard.

1. Draw your ByteArray to a BitmapData instance using setPixels().

2. Create a new BitmapAsset instance, and pass in your BitmapData.

3. Pass the BitmapAsset to your Image control's source property.

This assumes that your ByteArray is compatible with setPixels(). According to the docs, it needs to be a set of unsigned ints representing 32-bit ARGB values. If the ByteArray holds the image in another format, you'll have to find different way. If you're lucky, it'll be encoded as JPG, PNG, or GIF, and you'll be able to pass the ByteArray directly to source on the Image, and Flash Player will already know how to interpret it.

Answer 3

Simpler implementation that should work:

var bm : Bitmap = new Bitmap(ImageSnapshot.captureBitmapData(logoContainer));

Set "bm" as the source of your Image object.

Answer 4

You can actually just set the ByteArray directly as the source property of the Image class in the current Flex SDK.