BlackBerry 10 Web Development – Working With Photos and EXIF Data

Open Source

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?

Luckily I came across a great library to help you handle these photos a lot easier. JavaScript EXIF Reader by Jacob Seidelin is an extremely powerful library, which lets you read the EXIF (Exchangeable Image File Format) from photos.

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!

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.

TITLE_IMAGE

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!

About Chad Tetreault

Developer Relations at BlackBerry. Team @FilterMama and @TacoQuestApp member. #HTML5. I code in DOS Edit. BBM Channel C00124CF8

Join the conversation

Show comments Hide comments
+ -
blog comments powered by Disqus