html中的图像左转90度自动发出答案

【问题标题】：image in html left turn 90 degree automatically issuehtml中的图像左转90度自动发出
【发布时间】：2023-03-16 00:09:01
【问题描述】：

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

如果我直接在浏览器中打开就没有问题。

如果我像下面这样通过 html 打开：

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

然后图像自动左转 90 度。您可以在http://jsfiddle.net/ 中执行此操作，并会看到结果。

感谢您的帮助。谢谢！

问候，标记

【问题讨论】：

标签： html

【解决方案1】：

图像通过使用其 EXIF 元数据进行旋转。浏览器 <img> 标签由于某种原因不尊重这一点

您可以使用imagemagick 之类的工具来正确旋转图像。安装后，运行：

convert source.jpg -auto-orient dest.jpg

在对此进行一些研究之后，显然有一个新的 CSS 属性 image-orientation 可以在不更改图像的情况下解决此问题。很遗憾，only firefox supports this（截至 2014 年 7 月）。

img {
    image-orientation: from-image;
}

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

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

【讨论】：

你好羊皮纸。这里的问题是我有很多用户通过我的网站自己上传照片，我不知道哪一张是旋转的，哪一张不是。我正在使用 filepicker.io 上传照片。
@MarkThien 浏览文件选择器文档，我相信我找到了一些有用的东西。我会编辑答案。
嗨羊皮纸，“from-image”是图片的网址？
@MarkThien from-image 是 css 关键字，表示图像将通过其 exif 数据自动旋转。请记住，该 css 目前仅适用于 Firefox。我已经编辑了帖子
@MarkThien filepicker.io 如果您添加/convert?rotate=exif，将自动旋转需要旋转的图像。唯一的问题是 filepicker.io 中的图像转换不是免费的，对吧？