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.

ketan
  • 19,129
  • 42
  • 60
  • 98
user57404
  • 91
  • 1
  • 1
  • 10

7 Answers7

12

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

 yourImage.source = yourByteArray;

regards!

Alex Rios
  • 129
  • 1
  • 2
  • +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 Jul 02 '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 ...

Taryn
  • 242,637
  • 56
  • 362
  • 405
back2dos
  • 15,588
  • 34
  • 50
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

ozke
  • 1,622
  • 4
  • 25
  • 44
  • 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 09:42
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);
typeoneerror
  • 55,990
  • 32
  • 132
  • 223
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>
David Wolever
  • 148,955
  • 89
  • 346
  • 502
Yack
  • 1,400
  • 1
  • 10
  • 13
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);
GitaarLAB
  • 14,536
  • 11
  • 60
  • 80
Maxsquatch
  • 9
  • 1