Working with user-generated photos can be a pretty daunting task at times for developers. There are so many variables that come in to play.
What is the aspect ratio?
Is it taken in landscape or portrait?
What orientation is the photo saved in?
So why is this important? Well, as you may be aware of, photos taken on your BlackBerry 10 device are actually stored sideways. How this affects you, as a developer, is that if you need to use that user-taken photo in your app it will appear sideways unless
So you’re thinking, that’s great, I’ll just rotate every photo and problem solved. NO!
Why not? Photos taken from the front, and rear cameras are both stored sideways, rear camera photos appear “right-side up” (with an EXIF.orientation value of 6) while photos from the front camera are store “left-side up” (EXIF.orientation 8). As you can see, you need to be able to detect not only if a photo is stored sideways, but also which orientation it’s stored with so you can rotate it accordingly.
This is where the EXIF Reader library helps out. By calling one method, you’re able to fetch not only the orientation data of a photo, but all of its EXIF data. This could include the photo’s dimensions, device make and model, or right down to very specific properties of the photo like what exposure was used, or whther the flash went off or not.
I wrote a quick sample app which demonstrates how a developer would handle a photo taken from the camera within their application. When the user takes a photo the EXIF data is read, the photo’s orientation is determined, and the photo is rotated on a HTML5 Canvas so that it appears “top-side up”. The developer is then left with a handy Base64 string which can be saved, uploaded, etc.
Check out the EXIF Data Reader sample on our GitHub Repository.
If you find this sample useful, have any questions, or just want to keep up-to-date on the world of BlackBerry WebWorks and HTML5, follow me on Twitter!