Photo orientation handling in google appengine with python

After realising that not all photos uploaded are correctly handled in regard to orientation the search started. After some hours I got the solution. First of all this happens only on PNG pictures uploaded by phonegap camera plugin on iOS. A work around would be parsing the meta data of an image uploaded to google appengine. If you use phonegap camera plugin with encoding JPEG there is no issue (and even much faster).

It occurred with my iPhone with PNG as phonegap camera encoding type and Apple uses the Orientation meta data tag, it seems the following values give guidance on how to rotate your uploaded image before you save.

This applies only to images saved in the datastore db.Blob, NOT the blobstore ! In blobstore you have no influence during the upload and the blobstore handles the orientation correctly.

The following post supported my solution:
http://lkubaski.wordpress.com/2013/01/18/rotating-photos-from-mobile-devices-uploaded-to-google-app-engine/

This posts lists the iOS orientation values used:

1: image is Normal-> that’s the orientation value you get when the iphone home button is on the right
2: image is flipped horizontally
3: image is rotated 180° -> that’s the orientation value you get when the iphone home button is on the left
4: image is flipped vertically
5: image is rotated 90° CCW and flipped vertically
6: image is rotated 90° CW 
7: image is rotated 90° CW and flipped vertically
8: image is rotated 90° CCW 

How to rotate the image
orientation = 1 -> don’t rotate
orientation = 3 -> rotate 180° clockwise
orientation = 6 -> rotate 90° clockwise
orientation = 8 -> rotate -90° clockwise (or 90° counter clockwise if you prefer)

The sample code (python google appengine):

obj = YourDBObj()
img = images.Image(raw_file)
img.resize(140)
save = img.execute_transforms(output_encoding=images.PNG, parse_source_metadata=True)
meta_data = img.get_original_metadata()
  if meta_data != None:
      logging.info('debug: meta data nach image %s', meta_data)
      if meta_data.get("Orientation"):
          logging.info('debug: meta data Orientation found %s', meta_data["Orientation"])
          if meta_data.get("Orientation") == 6:
              logging.info('debug: rotate image by 90')
              img.rotate(90)
              save = img.execute_transforms(output_encoding=images.PNG, parse_source_metadata=True)
      else:
          logging.info('debug: no orientation')
obj.pict = db.Blob(save)
obj.put()

For blogstore objects using the image get_serving_url() you could do rotation by adding -r90 as of an undocumented feature: https://code.google.com/p/googleappengine/issues/detail?id=4200

iPhone / Android App

My first app. What a painful experience. Intention was to write an app which will run on all major mobile devices.

Starting with Accelerator showed quickly some drawbacks and the learning experience was not pleasant.

Next was PhoneGap based on Apache Cordova. Much better and getting an app running was quite simple. I chose the ionicframework and AnuglarJS as key frameworks to work with. ionic is similar to bootstrap and AngularJS is a MVC based javascript framework. I made an app talking to a google appengine service through RESTful API. And really write once run on all major platforms!