Send ByteArray to JavaScript

Question

How to send a jpg image as ByteArray from as3 to javascript? And how to convert ByteArray to image in javascript?

Answer 1

Take your DisplayObject (Sprite/MovieClip/whatever) and convert it to a BitmapData:

myBitmapData.draw(mySprite);

Convert that to a PNG using adobe's AS3CoreLib

myByteArray = PNGEncoder.encode(myBitmapData);

Convert that to Base64 using Flex's Base64Encoder:

myBase64Encoder.encodeBytes(myByteArray);

Then export actionscript variables to Javascript using ExternalInterface.

Answer 2

The JavaScript and DOM implementations of current web browsers don't really have good mechanisms for doing this sort of thing.

Your best bet is to have your AS3 return a DATA protocol URI with a base64-encoded version of the image. Modern browsers (IE8+, FF2+, etc) will accept a DATA URI as the SRC of an IMG tag and will render the image contained therein.

http://en.wikipedia.org/wiki/Data_URI_scheme

You'll have to have a AS3 expert explain how to turn an byte-array into a base64-encoded string, but it cannot be that hard.