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

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.

Answer 2

There is a method in this class that does that:

https://github.com/monkeypunch3/flexcapacitor/blob/master/MainLibrary/src/com/flexcapacitor/utils/DisplayObjectUtils.as

calling

var data:String = DisplayObjectUtils.getBase64ImageDataString(); 

will return this string:

data:image/png;base64,...

You then set the src of an img in html to that value.

Answer 3

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.