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中完成此操作：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

Answer 2

我不确定为什么它会让你的图像翻转，但你可能会尝试清理你的代码以使其更简洁。对Jquery不那么简单的操纵。

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

类似的东西。

带有来自URL的src的图像有时会出现倒置或侧面

2 个答案: