2

I am using Filepicker for uploading pictures and sometimes happen that the uploaded picture is rotated about 90°.

I don't know if this is a known issue or it's problem only on my side, but is there any way to avoid to this behaviour?

EDIT: I just found out that the image is saved correctly, but it's displayed incorrectly - rotated. I am loading the image this way:

= image_tag main_img.file_url, :alt => @photo.title, :title => @photo.title, :style => 'width: 200px; border: 1px solid #000;'

What am I doing wrong? Why is the image displayed as "twisted" and not in the right position?

user984621
  • 46,344
  • 73
  • 224
  • 412

3 Answers3

4

The reason for this behaviour is, that pictures can contain a rotation information in the EXIF data.
That means that if i.e. a photo was taken with a smart phone in portrait orientation, it may be stored in landscape orientation and marked 'rotated by 90°'. It now depends on the display program, whether it rotates the image back or not.

Most image processing programs do the rotation, most browsers don't.

The only way to avoid this behavior is to recalculate the image respecting the rotaion information in the EXIF data.
You can use imagemagick, exiftran or jhead to acieve this, see https://superuser.com/a/38860 .

Community
  • 1
  • 1
Martin M
  • 8,430
  • 2
  • 35
  • 53
  • This is still a little bit confusing for me. The image is saved correctly, but only in the browser displayed incorrectly (rotated about 90°). Is there any quick trick how to display these images properly? Also, I've never faced this problem, but just now when I am using FilePicker for upload files. – user984621 Oct 04 '13 at 12:55
  • 1
    It's displayed correctly because the program you're using to view the image (maybe it's Preview on the mac or whatever?) is reading the EXIF data and rotating it for you. The browser doesn't do this. Martin is correct: you'll need to use imagemagick or the like to rotate it on the back-end, re-store the image, then display in the browser. – threejeez Dec 17 '13 at 16:18
3

I've found that by changing the file format of the uploaded image from 'jpg' to a format that doesn't contain exif metadata like 'png,' I'm able to remove this rotation issue. Worked in my case, using Filepicker's API, which makes it very simple to change file formats non-destructively, in the image's URL.

Goldnuggets
  • 223
  • 1
  • 3
  • 13
0

Use a conversion and add rotate="exif" to maintain the rotation encoded in the image's EXIF data.

https://developers.filepicker.io/docs/web/rest/#blob-images or https://developers.filepicker.io/docs/web/javascript_api/#convert

Dsyko
  • 1,499
  • 14
  • 27