Mình thấy nội dung này hay nên copy qua trang để lưu trữ và share cho các bạn. Có thể xem nội dung gốc tại đây.
One of my favourite services at the moment is Transloadit, who provide an image processing API that works a treat on top of platforms like Heroku, where there are strict request timeout limits that make large uploads difficult. They handle auto-orientation of images automagically by default, and normally I’m not even aware of it happening during testing since my camera and OSX also handle auto-orientation transparently.
One of my favourite services at the moment is Transloadit, who provide an image processing API that works a treat on top of platforms like Heroku, where there are strict request timeout limits that make large uploads difficult. They handle auto-orientation of images automagically by default, and normally I’m not even aware of it happening during testing since my camera and OSX also handle auto-orientation transparently.
Recently one particular image stuck out on the staging server as un-rotated, while it worked fine locally using ImageMagick/Dragonfly. Not only that, but the width and height seemed to be wrong, warping the image (the app I’m working on uses a tiled layout, and requires the width and height of each image to be explicitly set in CSS).
I put together a few test images, and have been talking it over via email with Transloadit for the last couple of days (who’ve been super-helpful), and just for kicks thought I’d try uploading the test images to a few other sites to see how everyone else handles it. So began a descent into EXIF madness…
Eh? EXIF Orientation?
The EXIF (exchangeable image file format) standard specifies a set of tags that can be embedded in images (among other things). One of these tags specifies the orientation of the photo, and has 8 possible values which cover every possible combination of rotation and mirroring of an image. This enables you to take a picture with your camera sideways or upside-down (or even inside-out), and stand a reasonable chance of having it display properly on your computer.
This diagram from 80sidea explains the 8 orientations pretty succinctly:
