html中的图像左转90度自动发出 [英] image in html left turn 90 degree automatically issue

问题描述

我在显示图像时遇到了问题，我知道这可能听起来很傻，但我真的第一次遇到这种问题.

图片网址: 之类的工具来正确旋转图像.安装后，运行:

convert source.jpg -auto-orient dest.jpg

在对此进行一些研究之后，显然有一个新的 CSS 属性 image-orientation 可以在不更改图像的情况下解决此问题.不幸的是，只有 Firefox 支持此功能(截至 2014 年 7 月).

img {图像方向:来自图像；}

由于您使用 filepicker.io，您可以使用他们的图像转换工具来完成这项工作.通过在文件句柄后添加 /convert?rotate=exif，图像会根据其 exif 数据自动旋转.

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

结果小提琴

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

解决方案

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

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

这篇关于html中的图像左转90度自动发出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！