从URL中看到src的图像倒转或横向出现有时

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

$('<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%; 
}

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

来源

2014-10-01 Sloth Armstrong

你能从所选照片的EXIF数据中获得方向信息吗？ – Quantastical 2014-10-01 03:57:06

@Quantastical好的，这实际上解释了很多。方向是6（逆时针旋转90度）。这解释了为什么它在其他地方显示正确。有没有办法来检测这将是简单的？或者这是否值得另一个线程？谢谢！ – 2014-10-01 04:03:07

从来没有做过，但下面的答案有一些洞察到检索通过JavaScript的EXIF方向，你可能会使用：http://stackoverflow.com/questions/14270574/extract-exif-orientation-data-from-image – Quantastical 2014-10-01 04:06:45

这些照片可能会以自然方向呈现。在拍摄照片时，一些关于相机的元数据被存储在一些名为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

来源

2014-10-01 17:29:11 Quantastical

非常感谢！ – 2014-10-01 19:46:42

Quantastical提出了一个很好的观点。很可能图像在您的机器上看起来是正确的方向，但实际上它们可能不是。就像你在文件浏览器中一样，并且你已经旋转了你的图片。 – 2014-10-01 04:08:12

我不确定为什么它会让你的图像翻转，但你可以尝试清理一下你的代码，以便更简洁。减少Jerry在Jquery上的操纵。

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

就是这样的。

来源

2014-10-01 04:05:32 Breedly

从URL中看到src的图像倒转或横向出现有时

回答

相关问题