6

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.

  • More information would be helpful. – C. Ross May 25 '09 at 13:46
12

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

 yourImage.source = yourByteArray;

regards!

  • +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? – Felipe Almeida Jul 2 '11 at 21:28
  • the questions is about background image style, this does not work with setStyle('backgroundImage',...) – César Alforde Jul 12 '13 at 18:15
4

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 ...

2

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

  • 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. – ozke Aug 15 '13 at 9:42
1

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>
1

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);
0

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.

0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.