從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的圖像倒轉或橫向出現有時

回答

相關問題