CameraRoll for Android. Select Image and Display it example?

[Leo Kanel]

I am trying to make a simple app which allows the user to select an image from CameraRoll and then display it in an <s:Image/> on Flex, but all the tutorials and example code, is very old.

I managed to get the cameraroll working with permissions, select the image, but then I can't display it in and Image object.

Any one has an updated sample?

[mprabhu33 · Accepted solution]

Please find the below working code to browse and display image.

private var camRoll:CameraRoll;

private var dataSource:IDataInput;

private var eventSource:IEventDispatcher;

private var mediaPromise:MediaPromise;

private function initCameraRoll():void

{

trace("ATTACH: Init...");

camRoll = new CameraRoll();

if( CameraRoll.supportsBrowseForImage )

{

if(CameraRoll.permissionStatus != PermissionStatus.GRANTED)

{

camRoll.addEventListener(PermissionEvent.PERMISSION_STATUS, function(e:PermissionEvent):void {

if (e.status == PermissionStatus.GRANTED)

{

trace("ATTACH: Permission granted");

connectCameraRoll();

}

else

{

trace("ATTACH: Permission Denied");

}

});

try {

trace("ATTACH: Request Camera Roll Permission");

camRoll.requestPermission();

} catch(e:Error)

{

trace("ATTACH: Another Request InProgress");

}

}else

{

trace("ATTACH: Permission granted");

connectCameraRoll();

}

}

else

{

trace("ATTACH: File browse not support")

}

}

private function connectCameraRoll():void

{

trace("ATTACH: Connect Camera Roll");

camRoll.addEventListener( MediaEvent.SELECT, mediaSelected );

camRoll.addEventListener( Event.CANCEL, browseCanceled );

camRoll.addEventListener( ErrorEvent.ERROR, mediaError );

camRoll.browseForImage();

}

private function mediaSelected( event:MediaEvent ):void

{

mediaPromise = event.data;

dataSource = mediaPromise.open();

trace("ATTACH: Media selected..."+mediaPromise.isAsync+":"+mediaPromise.file);

if( mediaPromise.isAsync )

{

eventSource = dataSource as IEventDispatcher;           

eventSource.addEventListener( Event.COMPLETE, onMediaLoaded );        

} else

{

readMediaData();

}

}

private function onMediaLoaded( event:Event ):void

{

readMediaData();

}

private function readMediaData():void

{

trace("ATTACH: Read Media..."+mediaPromise.relativePath+":"+mediaPromise.file);

var imageBytes:ByteArray = new ByteArray();

dataSource.readBytes(imageBytes);

//Load image byte array to your Image Object

yourImagaeObject.source = imageBytes;

}

private function browseCanceled( event:Event ):void

{

trace("ATTACH: Media cancelled...");

}

private function mediaError (e:ErrorEvent):void

{

trace("ATTACH: Media error..."+e.text);

}

[Leo Kanel]

Thank you. This worked like a charm. It looks like I didn't have the dataSource.readBytes(imageBytes); on my code and that caused both the display image and my upload to server to fail.

Does this code also work for iOS?

[mprabhu33]

Yes, will work both android and iOS.

[Leo Kanel]

Thank you for all the help.

[Leo Kanel]

I am back with an extra question. I am uploading the images to a server after selecting them and as you may already imagined, some images are too big and it takes time.

Is there a way to resize them to a smaller size?

Most pics I uploaded are taken from a phone camera which makes them 6-7mb. I am thinking I should resize them from 6000x4000 from my phone to something more appropriate like half or 1/3 of that.

[mprabhu33]

Yes, load the imageBytes in resized image object either using reduced width(2000) and height(2000) or set maxWidth(2000) and maxHeight(2000) properties.

var bmpData:BitmapData = new BitmapData(resizedImg.width,resizedImg.height);

bmpData.draw(resizedImg);

var pngEn:PNGEncoder = new PNGEncoder();

var resizedBA:ByteArray = pngEn.encode(bmpData);

Upload resizedBA to the server. Reduce the actual image size data based on the resized image width and height.

[mprabhu33]

Compress the byteArray before upload using byteArray.compress(algorithm:String)

ByteArray - Adobe ActionScript® 3 (AS3 ) API Reference