Highlighted

CameraRoll for Android. Select Image and Display it example?

Engaged ,
Jul 16, 2019

Copy link to clipboard

Copied

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?

Correct answer by mprabhu33 | Community Beginner

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

}

TOPICS
Development

Views

425

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

CameraRoll for Android. Select Image and Display it example?

Engaged ,
Jul 16, 2019

Copy link to clipboard

Copied

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?

Correct answer by mprabhu33 | Community Beginner

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

}

TOPICS
Development

Views

426

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 16, 2019 0
Community Beginner ,
Jul 16, 2019

Copy link to clipboard

Copied

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

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 16, 2019 1
Engaged ,
Jul 18, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2019 0
Community Beginner ,
Jul 18, 2019

Copy link to clipboard

Copied

Yes, will work both android and iOS.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2019 2
Engaged ,
Jul 18, 2019

Copy link to clipboard

Copied

Thank you for all the help.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2019 0
Engaged ,
Jul 18, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 18, 2019 0
Community Beginner ,
Jul 19, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2019 0
Community Beginner ,
Jul 19, 2019

Copy link to clipboard

Copied

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

ByteArray - Adobe ActionScript® 3 (AS3 ) API Reference

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 19, 2019 0