Odd image rotation when uploading photos taken from Samsung S4

Issue occurs when I upload an image to my webapp from the Samsung S4. The actual image displays just fine when requested directly through Chrome (ie. http://xxxxx/image.jpg). However, when rendered using rails image tag, the image appears 90 degrees rotated. The image appears rotated in Chrome but renders fine in mobile safari.

Turns out.. images uploaded through the Samsung Galaxy S4 includes an extra bit of metadata to tell the renderer how to orient the image correctly. It would appear that chrome (or perhaps it's rails, not sure) isn't taking this into account.

The proper solution is to allow your rendering code to detect the image orientation. Perhaps there's a way to solve this through CSS. Since I'm bound by time, I've came up with the most fastest (albeit hacky) solution possible... manual commands via imagemagick!


Turns out it's extremely easy to install imagemagick on linux:

sudo apt-get install imagemagick

Rotating the image:

convert source_photo.jpg -rotate 90 dest_photo.jpg

Removing the image metadata:

mogrify -strip image.jpg


Please share if you have a more automated solution!!


No comments: