Actionscript 3: Converting bytearray to PNG and display on the scene - actionscript-3

I'm getting getting a PNG image stored in SQL through a WCF get call. The image is encoded as a base64 string and delivered to my AS3 code. I need to extract the image from the data and show it on the scene.
Among other things, I have also tried this...
var imgArray:ByteArray = Base64.decodeToByteArray(responseXML.ImageObject);
var myRect:Rectangle = new Rectangle(100,100,200,200);
var bmd:BitmapData = new BitmapData(200,200,true,0xAAAAAAAA);
bmd.setPixels(myRect, imgArray);
var image:Bitmap = new Bitmap(bmd,"auto",true);
this.addChild(image);
but to no avail.
HELP!

why don't you use a loader and loadbytes? It's native.
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, handleLoad)
loader.loadbytes(byteArray);
private function handleLoad(e:Event):void {
var loader:Loader = e.currentTarget as Loader;
// removelistener,etc
trace(loader.content as Bitmap);
}
The problem with your code is that PNG is compressed, bitmap is uncompressed.

I used DanielH's input and got the image to load on my stage. Here is what I did in the event handler function...
function ImageLoaded(e:Event):void
{
var bmd:BitmapData = new BitmapData(imageLoader.ImageLoader.width,imageLoader.ImageLoader.height,true, 0xFFFFFF);
bmd.draw(imageLoader.ImageLoader);
var image:Bitmap = new Bitmap(bmd,"auto",true);
image.width=40;
image.height=40;
if(!CheckAndStoreImageIDKey(imageLoader.ImageID))
{
Images[imageLoader.ImageID] = image;
}
}

Try PNGDecoder (http://www.ionsden.com/content/pngdecoder)
import ion.utils.png.PNGDecoder;
var bmd:BitmapData = PNGDecoder.decodeImage(imgArray);

Related

AS3 Load Image Using Path From Text File

i use txt file that contain paths.
after loaded txt file and split to path array
then load img file from array path
but i get err in loading img
please help me
sample code:
var imglst:Array=new Array();
var lodimg:Loader=new Loader();
var lodtxt:URLLoader=new URLLoader();
lodtxt.load(new URLRequest("imglst.txt"));
lodtxt.addEventListener(Event.COMPLETE,onL_C);
function onL_C(e:Event)
{
var t:Array=new Array();
t=e.target.data.split(/\n/);
var s:URLRequest=new URLRequest(t[0].toString());
trace(t[0]);
lodimg.load(s);
}
lodimg.contentLoaderInfo.addEventListener(Event.COMPLETE,onL_Cimg);
function onL_Cimg(e:Event)
{
var i:Bitmap=new Bitmap();
i=Bitmap(lodimg.content);
i.width=100;
i.height=100;
addChild(i);
trace("OK");
}
Are you loading images from a different website from your own? Does the other website(s) have a crossdomain.xml to allow permissions of loading their content? Usually Flash will give you a "security error" as an event but your code isn't listening for such an event so your program is not aware of any such problems... look on google how to handle AS3 errors.
Anyways a workaround is to just load the bytes of file using URLloader and on completion you then only use Loader to decode the bytes into pixel colours.
import flash.utils.ByteArray;
var imglst : Array;
var lodimg : Loader;
//var lodtxt : URLLoader = new URLLoader();
var lodURL:URLLoader = new URLLoader();
var img_bytes : ByteArray = new ByteArray();
lodURL.load(new URLRequest("http://yoursite/imglst.txt"));
lodURL.addEventListener(Event.COMPLETE,onL_C);
function onL_C (e:Event)
{
//# Since load complete no need to keep listening for that
lodURL.removeEventListener(Event.COMPLETE,onL_C);
var t:Array=new Array();
t=e.target.data.split(/\n/);
var s:URLRequest=new URLRequest(t[0].toString());
trace(t[0]);
//lodimg.contentLoaderInfo.addEventListener(Event.COMPLETE,onL_Cimg);
//lodimg.load(s);
//# Now we know path so we load those file bytes
lodURL.dataFormat = URLLoaderDataFormat.BINARY;
lodURL.load(s); lodURL.addEventListener(Event.COMPLETE, onBytes_C);
}
function onBytes_C (e:Event)
{
//# on complete load of bytes...
trace("got bytes");
img_bytes = lodURL.data;
//trace("Image bytes total : " + img_bytes.length);
img_bytes.position = 0; //avoid "end of file" error
lodimg = new Loader();
lodimg.contentLoaderInfo.addEventListener(Event.COMPLETE,onL_Cimg);
lodimg.loadBytes(img_bytes); //we already have data so this will be fast
}
function onL_Cimg (e:Event)
{
var i:Bitmap = new Bitmap();
i = lodimg.content as Bitmap;
i.width=100;
i.height=100;
addChild(i);
trace("OK");
}

Loading an Image with AIR and Displaying It On Stage

I am having trouble loading an image and displaying it on stage using the File API in as3. I am able to successfully load it in but when I put it on stage the image is just noise. I am assuming because I need to decode the PNG/JPG into Bitmap data somehow and I am doing it wrong? Here is my code:
public function browseForIcon(){
var file:File = new File();
file.addEventListener(Event.SELECT, onFileSelected);
file.browseForOpen("Select a an image");
}
private function onFileSelected(event:Event):void {
var stream:FileStream = new FileStream();
stream.open(event.target as File, FileMode.READ);
var bytes:ByteArray = new ByteArray();
stream.readBytes(bytes);
var img = new BitmapData(160,160);
img.setPixels(new Rectangle(0,0,160,160),bytes);
this.addChild(new Bitmap(img));
}
}
THANKS!
One option is to use Loader.loadBytes(). If you're using Flex, you could also use an Image with source set to the File.

Imdb api with flash - as3 - flex

I am trying to use the imdb API, in this case: http://imdbapi.org/
I need to search for a movie by name and get a json, then load an image with the poster obtained.
I'll be using as3 - flex to generate an Air package.
I tried this example, but can't seem to get it right.
import flash.net.*;
var url:String = "http://imdbapi.org/";
var request:URLRequest = new URLRequest(url);
request.method = URLRequestMethod.GET;
var variables:URLVariables = new URLVariables();
variables.name = "Pulp fiction";
request.data = variables;
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onComplete);
loader.dataFormat = URLLoaderDataFormat.TEXT;
loader.load(request);
function onComplete (event:Event):void {
trace(event.target.data);
}
Perhaps you could enlight me with an example of connecting to the api and retrieving that json so that I can load an image with the poster and generate my air package.
Many thanks!
The API seems to want the movie in the q param so change this
variables.name = "Pulp fiction";
to :
variables.q = "Pulp fiction";
To verify : http://imdbapi.org/?q=Pulp%20Fiction
From there getting the poster URL is just a matter of reading the correct property from the JSON string.
private function onComplete (event:Event):void {
var data:Array = JSON.parse(event.target.data);
if(data && data.length)
{
var movie:Object = data[0];
trace(movie.poster);
}
}

Modify dynamic created objects that are saved in an array

i have multiple images that are created dynamically, and i want in some cases to change the image. i can save them in an array, but how can i change the image (load another image) by getting it from the array.
let's say that i have an array:
var ImagesArray:Array = [];
and i push to it loader objects, and want to change (load new) image of ImagesArray[0] or ImagesArray[1]... like:
var loaderNew:Loader = new Loader();
loaderNew = ImagesArray[i];
loaderNew.load(new URLRequest("../lib/NewImg.png"));
Thanks,
You dont need to create new loader if you only want to change its image, here's an example of function to update image url:
private function changeImageByIndex(i:int, url:String):void
{
var loader:Loader = ImagesArray[i] as Loader;
if (!loader)
{
loader = new Loader();
addChild(loader);
ImagesArray[i] = loader;
}
loader.load(new URLRequest(url));
}
If you have bitmap, use loadBytes() method instead load(), here's example:
var bitmap:Bitmap = new Bitmap(new BitmapData(100, 100, true, 0xff0000));
var encoder:JPEGEncoder = new JPEGEncoder();
loader.loadBytes(encoder.encode(bitmap.bitmapData));

As3 Convert ByteArray to Bitmap

Noob to As3 Bitmap stuff...
when i try to doing the following code it fails
bmd.setPixels(bmd.rect, decodeValue);
and the error message is:
Error: Error #2030: End of file was encountered.
The situation is i have store the image as binary into the database by convert the byteArray and now i would like to retrieve it and convert back to image.
Just to clear this up ByteArray Need to Place into Bitmap and then you can add to the movie Clip right?
import flash.display.Loader;
import flash.net.URLRequest;
import flash.display.Bitmap;
import flash.display.BitmapData;
import com.dynamicflash.util.Base64;
var loader:Loader;
var req:URLRequest;
var orig_mc:MovieClip;
var copy_mc:MovieClip;
function loaderCompleteHandler(evt:Event) {
//swap data
var ldr:Loader = evt.currentTarget.loader as Loader;
var origImg:Bitmap = (ldr.content as Bitmap);
var origBmd:BitmapData = origImg.bitmapData;
trace(origImg.bitmapData);
trace(origImg.width);
trace(origImg.height);
//Convert image byteData into Base64 String
var byteArray:ByteArray = new ByteArray();
byteArray.writeObject(origBmd);
var encoded:String = Base64.encodeByteArray(byteArray);
trace("\nENCODED:\n" + encoded);
var decoded:ByteArray = Base64.decodeToByteArray(encoded);
trace("\nDECODED:\n" + decoded.toString());
// convert base64 string back into movieclip
var newBmd:BitmapData = new BitmapData(origImg.width,origImg.height,"true",0xFFFFFFFF);
newBmd.setPixels(origBmd.rect, decoded);**// THIS THROWS AN " Error #2030: End of file was encountered."**
var image:Bitmap = new Bitmap(newBmd, "auto", true);
copy_mc.addChild(image);
copy_mc.x = origImg.width;
}
loader = new Loader();
req = new URLRequest("C:\\Data\\cutcord.jpg");
loader.load(req);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderCompleteHandler);
// movieclip to display original image
orig_mc = new MovieClip();
orig_mc.addChild(loader);
addChild(orig_mc);
// movieclip to display image copy
copy_mc = new MovieClip();
addChild(copy_mc);
Anyone can help would be very appreciated :)
try this code :
var rect:Rectangle = new Rectangle(0,0,img.widht,img.height);
var byteArray:ByteArray = bitmapData.getPixels(rect);
var encoded:String = Base64.encodeByteArray(byteArray);
var decoded:ByteArray = Base64.decodeToByteArray(encoded);
decoded.position = 0;
var newBmd:BitmapData = new BitmapData(rect.width,rect.height,true,0xFFFFFFFF);
newBmd.setPixels(rect, decoded);
var image:Bitmap = new Bitmap(newBmd, "auto", true);
addChild(image);
anyway , Your idea of store string in server isnt too good ... Why You dont send ByteArray , not String ?
You can also encode bitmapData to JPG or PNG , and then send bytes to php.
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.