带有来自 URL 的 src 的图像有时会出现颠倒或侧向显示答案

【问题标题】：Image with src from URL appearing upside-down or sideways sometimes带有来自 URL 的 src 的图像有时会出现颠倒或侧向显示
【发布时间】：2014-10-01 03:49:47
【问题描述】：

我正在使用 jQuery 将图像附加到 div，同时将图像的源设置为用户选择的本地图像。一切都很好，除了图像有时会出现颠倒或侧向，这取决于图像（据我所知，随机）。 jQuery 看起来像这样：

$('<div class="image_preview">\
<img src="' + URL.createObjectURL(file) + '" />\
</div> ').hide().prependTo($preview_div).fadeIn("fast");

file 对象只是一个取自文件输入元素的文件。

图像预览 div 有一些看起来像这样的 css：

.image_preview img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 95%;
    max-height: 95%;
}

在搜索了无数线程之后，除了有人建议“也许图像应该是那样”之外，我找不到关于这个主题的任何内容。我验证了这些图像在渲染时实际上是被翻转的。如果有人听说过这样的事情，甚至可以指出我正确的方向，我将不胜感激。谢谢。

【问题讨论】：

你能从所选照片的EXIF数据中获取方向信息吗？
@Quantastic 好的，这实际上解释了很多。方向为 6（逆时针旋转 90 度）。这解释了为什么它在其他地方正确显示。有没有一种简单的检测方法？或者这值得另一个线程吗？谢谢！
以前从未做过，但以下答案对通过 JavaScript 检索 EXIF 方向有一些见解，您可能会使用：stackoverflow.com/questions/14270574/…
@Quantastical - 这就是解决方案。经过一些试验和错误，我得到了它的工作。如果您愿意，请将您的回复作为答案发布，我会将其标记为正确。

标签： javascript jquery html image imagesource

【解决方案1】：

照片很可能以其自然方向呈现。拍照时，一组关于相机的元数据存储在称为 EXIF 数据的东西中，例如时间、位置、快门和方向。

大多数照片查看软件，包括设备本身的软件，都会考虑方向并相应地显示。因此，您的逻辑也需要这样做。

以下 StackOverflow 帖子更详细地描述了如何在 JavaScript 中完成此操作：extract exif orientation data from image

var b64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABA......";
var bin = atob( b64.split( ',' )[1] ); // convert base64 encoding to binary
var exif = EXIF.readFromBinaryFile( new BinaryFile( bin ) );

console.log( exif.orientation );

有关 FileReader API 和 readFromBinaryFile 方法的更多信息，这里是 MDN 的链接：https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsBinaryString

【讨论】：

Quantastic 提出了一个很好的观点。这些图像很可能在您的机器上看起来是正确的方向，但实际上可能不是。就像您在文件浏览器中一样，并且您已经旋转了图像。

【解决方案2】：

我不完全确定它为什么会使您的图像翻转，但您可以尝试稍微清理一下您的代码以使其更简洁。减少对 Jquery 的杰里操纵。

var prevDiv = $("<div>", {class: "image_preview"});
var img = $("<img />", {src: URL.createObjectURL(file)})
prevDiv.prepend(img).hide().fadeIn("fast");

类似的东西。

【讨论】：