来自URL的带有src的图像有时会上下颠倒出现

Question

我正在使用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%;
}

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

Answer 1

这些照片很可能以自然的方向呈现。 拍摄照片时，一堆有关相机的元数据存储在称为EXIF的数据中 ，例如时间，位置，快门和方向。

大多数照片查看软件（包括设备本身上的照片查看软件）都会考虑方向并进行相应显示。 结果，您的逻辑将需要执行相同的操作。

以下StackOverflow帖子进一步详细描述了如何在JavaScript中完成此操作： 从图像提取exif方向数据

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

Answer 2

我不确定为什么会翻转您的Image，但您可以尝试清理一下代码以使其更加简洁。 减少Jerry上的Jerry操纵。

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

这样的事情。