Geek Answers Handbook

The image in html left rotation of 90 degrees automatically produces

I had a problem displaying the image, and I know that this sound is stupid, maybe, but I really encounter such a problem for the first time.

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

if I open in the browser directly, then no problem.

if I open via html as below:

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

then the image automatically rotates 90 degrees. you can do it at http://jsfiddle.net/ and you will see the result.

Please rate any help. thanks!

Regards, Mark

+2
source share
1 answer

The image is rotated using its EXIF ​​metadata. The browser tag <img> for some reason does not respect

exif rotate

You can use a tool such as imagemagick to rotate the image correctly . After installing it, run:

 convert source.jpg -auto-orient dest.jpg

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

 img { image-orientation: from-image; }

Since you are using filepicker.io, you can use your image conversion tools to complete the task. By adding /convert?rotate=exif after the file descriptor, the image is automatically rotated by its exif data.

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

Script result

+3
source

More articles:


All Articles