2

I got a problem of displaying image and I know this sound silly perhaps but I really facing this kind of problem the first time.

image URL : https://www.filepicker.io/api/file/KvxFiFSYQj1hGip67E0C?cache=true&w=320

if I open in browser directly then no problem.

if I open thru html like below:

<img src="https://www.filepicker.io/api/file/KvxFiFSYQj1hGip67E0C?cache=true&w=320">

then the image left turn 90 degree automatically. you can do this in http://jsfiddle.net/ and will see the result.

Appreciate some help please. thanks !

regards, Mark

Mark Thien
  • 1,108
  • 2
  • 22
  • 35
  • 2
    You should of just made a fiddle instead of linking fiddle site and tell other people to try it http://jsfiddle.net/BCFkN/ Looks like it's the site must be doing it since they want you to pay to upload images – Huangism Jul 16 '14 at 15:03

1 Answers1

3

The image is rotated by using its EXIF metadata. The browser <img> tag doesn't respect this for some reason

exif rotate

You can use a tool like imagemagick to rotate the image correctly. With it installed, run:

convert source.jpg -auto-orient dest.jpg

After some research into this, apparently there's a new CSS property, image-orientation that can fix this without changing the image. Unfortunately, only firefox supports this (as of July 2014).

img {
    image-orientation: from-image;
}

Since you use filepicker.io, you can use their image conversion tools to do the job. By adding /convert?rotate=exif after the file handle, the image is automatically rotated by its exif data.

<img src="https://www.filepicker.io/api/file/KvxFiFSYQj1hGip67E0C/convert?w=320&rotate=exif">

Result fiddle

parchment
  • 4,063
  • 1
  • 19
  • 30
  • hi parchment. the problem here is that i got a lot of user upload photo themself thru my website and I do not know which one is rotated and which one is not. I am using filepicker.io to upload photo. – Mark Thien Jul 16 '14 at 15:21
  • @MarkThien Browsing through the filepicker docs, I believe I found something that should help. I'll edit the answer. – parchment Jul 16 '14 at 15:26
  • hi parchment, the "from-image" is the image url ? – Mark Thien Jul 16 '14 at 15:29
  • @MarkThien the `from-image` is the css keyword that means the image will be automatically rotated by its exif data. Keep in mind that that css currently only works in firefox. I've edited the post – parchment Jul 16 '14 at 15:31
  • yeah I got it and I tried it in jsfiddle and it works only in firefox. but this solution doesn't completely work for me as a few photos will be displayed on a page and I will not know which one need to be rotated as your solution is to rotate every image. Even image that correctly display also got rotated. – Mark Thien Jul 16 '14 at 15:38
  • 1
    @MarkThien filepicker.io will automatically rotate images that need to be rotated if you add `/convert?rotate=exif`. The only thing that would be an issue is that the image conversions are not free in filepicker.io right? – parchment Jul 16 '14 at 15:42
  • hi Parchment, ok I got it. I overlooked your solution. just append "&rotate=exif" to every filepicker image url will do. Really thanks a lot man. I love you. Cheerio :) – Mark Thien Jul 16 '14 at 15:47
  • How can this be done when the image source is a file on the computer and not from the internet? – Dov Miller Nov 07 '16 at 11:29