How to convert bytearray to image or image to bytearray ?

Question

How to assign bytearray value to panel background image. If anybody have idea or experiance plz help me to overcome the problem. BRIEF EXP:

I have panel control and want to load image getting from webservice as a backgroundimage. So i used setstyle() but its not accepting that image. so how to add that image into my panel background image.Plz tel me your ideas here.

Olson

More information would be helpful. – Illuviation

Answer 1

In Flex 3 or higher, you just need to do:

 yourImage.source = yourByteArray;

regards!

Vassaux

+1 Hey. That looks real neat. Why was I told that, to use a byteArray as the source for an image, I had to write something like img.load(myByteArray)? Does that even make sense? – Prostyle

the questions is about background image style, this does not work with setStyle('backgroundImage',...) – Errhine

Answer 2

uhm, well i presume, since it is an image, you have it in a BitmapData, let's say "myBmp" ... then use the following to extract all the data from BitmapData:

var bytes:ByteArray = myBmp.getPixels(myBmp.rect);

and the following to write:

myBmp.setPixels(myBmp.rect, bytes);

note that only the raw 32 bit pixel data is stored in the ByteArray, without compression, nor the dimensions of the original image.

for compression, you should refer to the corelib, as ozke said ...

Driver

Answer 3

For AS3 you can use adobe corelib. Check this tutorial... http://ntt.cc/2009/01/09/as3corelib-tutorialhow-to-use-jpegencoder-and-pngencoder-class-in-flex.html

Margotmargrave

Just changed the link to a similar tutorial but please check other answers on not using an external library like the one Alex Rios posted. – Margotmargrave

Answer 4

Using adobe's JPGEncoder (com.adobe.images.JPGEncoder) class and ByteArray is pretty much all you need. Converting image to byte array (assuming CAPS are variables you'd need to fill in):

// -- first draw (copy) the image's bitmap data
var image:DisplayObject = YOUR_IMAGE;
var src:BitmapData = new BitmapData(image.width, image.height);
src.draw(image);

// -- encode the jpg 
var quality:int = 75;
var jpg:JPGEncoder = new JPGEncoder(quality);
var byteArray:ByteArray = jpg.encode(src);

Orientate

Answer 5

I used a flash.display.Loader() to load an image in an array. It has a Complete event that is fired after the image has been loaded. I then draw the image on to a Bitmap which I set to the data of a Image that could be placed in a panel. Hope you can make since of this good luck.

public static function updateImage(img:Image, matrix:Matrix,
                                   pageDTO:PageDTO, bitmapData:BitmapData):void {
    var loader:flash.display.Loader = new flash.display.Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, function (e:Event) : void {
        bitmapData.draw(loader.content, matrix);
        pageViewer.data = new Bitmap(bitmapData);
    });
    loader.loadBytes(pageDTO.thumbnail);
}

<mx:Panel>
    <mx:Image id="pageViewer"/>
</mx:Panel>

Mossman

Answer 6

I had the same problem. As a workaround I created sub Canvas nested inside a main Canvas and added an Image to the main Canvas behind the sub Canvas. Anything drawn on the sub Canvas will appear on top of the Image.

Highoctane

Answer 7

Just load it into a Loader instance using the loadBytes function.

var ldr:Loader = new Loader(); 
ldr.loadBytes(myByteArray); 
addChild(ldr); 

Hartnett