Highlighted

Convert iPhone photo to JPG before upload to server?

Participant ,
Mar 13, 2014

Copy link to clipboard

Copied

The issue I'm having is that I'm trying to have the user upload a photo from their iPhone to my server. However, I don't want their raw, large file size photo. Is there a way I can encode the photo to a smaller quality JPG before the user uploads it?

TOPICS
Development

Views

5.5K

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

Convert iPhone photo to JPG before upload to server?

Participant ,
Mar 13, 2014

Copy link to clipboard

Copied

The issue I'm having is that I'm trying to have the user upload a photo from their iPhone to my server. However, I don't want their raw, large file size photo. Is there a way I can encode the photo to a smaller quality JPG before the user uploads it?

TOPICS
Development

Views

5.5K

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
Mar 13, 2014 0
Adobe Community Professional ,
Mar 13, 2014

Copy link to clipboard

Copied

Yes, read about JPEGEncoderOptions:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/JPEGEncoderOptions.html

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...
Mar 13, 2014 0
Participant ,
Mar 13, 2014

Copy link to clipboard

Copied

Thanks for the quick reply, Colin. The problem I'm having is how do I use the JPEGEncoder when the photo data is in a ByteArray?

// Create a new imagePromise

               var imagePromise:MediaPromise = evt.data;

// Open our data source

               dataSource = imagePromise.open();

               var imageBytes:ByteArray = new ByteArray();

                              dataSource.readBytes( imageBytes );

// Create a new FileStream

               var stream:FileStream = new FileStream();

               stream.open(temp, FileMode.WRITE);

               stream.writeBytes(imageBytes);

               stream.close();

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...
Mar 13, 2014 0
Adobe Community Professional ,
Mar 14, 2014

Copy link to clipboard

Copied

You can get the bitmap from the media promise with this:

var imageB = imageLoader.content as Bitmap;

This gives you the bitmapdata and encodes it as a jPEG ByteArray

var imageBD:BitmapData = imageB.bitmapData;

var byteArray:ByteArray = new ByteArray();

imageBD.encode(new Rectangle(0,0,imageBD.width, imageBD.height), new JPEGEncoderOptions(), byteArray);

‘byteArray’ now is the JPEG ready to upload. The whole upload side of things is its own issue, but I’ll wait to see if you have questions on 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...
Mar 14, 2014 0
Participant ,
Mar 15, 2014

Copy link to clipboard

Copied

Colin, thank you so much for the speedy reply! After a little tinkering I got it to work (see below)! Colin, do you have any suggestions as to the best way to tackle photo orientation?

=================================================================================

                    // onMediaLoaded

                    // =================================================================================

                    function onMediaLoaded( event:Event ):void

                    {

                              mainScreen.feedbackText.text +=  "Image Loaded.";

 

                              imageB = imageLoader.content as Bitmap;

 

                              readMediaData();

                    }

  =================================================================================

                    // readMediaData

                    // =================================================================================

                    function readMediaData():void

                    {

                              mainScreen.feedbackText.text +=  "Reading Image Data.";

 

                              var imageBD:BitmapData = imageB.bitmapData;

                              var byteArray:ByteArray = new ByteArray();

 

imageBD.encode(new Rectangle(0,0,imageBD.width, imageBD.height), new JPEGEncoderOptions(25), byteArray);

Also, add this to the imageSelected function:

            imageLoader = new Loader();

            imageLoader.contentLoaderInfo.addEventListener( Event.COMPLETE, onMediaLoaded );

            imageLoader.addEventListener( IOErrorEvent.IO_ERROR, mediaError );

            imageLoader.loadFilePromise( imagePromise );

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...
Mar 15, 2014 0
Adobe Community Professional ,
Mar 15, 2014

Copy link to clipboard

Copied

In some cases, like using the camera, I find that the image comes in rotated. Other times when getting a picture from the album it may be sideways too. I have not yet found a way to read oreientation from EXIF data, and even if that was possible it won't help for images that were saved from web sites or emails.

For my purposes though, if I'm asking the user to take a photo of themselves it is intended that it be portrait. So I check the width and height to know if I should rotate the incoming photo. Here's how that works:

private function imageLoaded( event:Event ):void {

      bm = imageLoader.content as Bitmap;

          if(bm.width>bm.height){

     rot90(bm.bitmapData);

          }else{

     bmd = bm.bitmapData;

          }

          dispatchEvent(new Event("pictureready"));

}

private function rot90(bmdata:BitmapData){

          var matrix:Matrix = new Matrix();

          matrix.translate(-bmdata.width / 2, -bmdata.height / 2);

          matrix.rotate(90 * (Math.PI / 180));

          matrix.translate(bmdata.height / 2, bmdata.width / 2);

          bmd = new BitmapData(bmdata.height, bmdata.width, false, 0x00000000);

          bmd.draw(bmdata, matrix);

          bm.bitmapData = bmd;

}

bm and bmd are public variables in my class file that loads photos. The main app code can retrieve either the bitmap or the bimatpdata of the thing that was loaded. But those are details that need not affect you. Just look at the rotate code, it's handy to have arounn.

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...
Mar 15, 2014 0
Participant ,
Apr 08, 2014

Copy link to clipboard

Copied

Thank you Colin. This makes sense!

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...
Apr 08, 2014 0