確定照片在JavaScript中的方向？

我們使用FileReader從iPhone拍攝的照片中獲取圖像到瀏覽器中。然後，我們使用drawImage()將該圖像繪製到canvas上。問題是在iPhone上顯示的照片在頁面上旋轉。我們無法在任何Android設備上重現此操作。確定照片在JavaScript中的方向？

我們可以很容易地旋轉canvas上的圖像，但我們如何確定所需的旋轉？我們嘗試了一些JavaScript的EXIF閱讀庫（exif.js），但無法成功閱讀方向。

來源

2013-04-25 eagspoo

好了，所以它看起來像你其實可以閱讀使用exif.js.的EXIF數據

$("input").change(function() { 
    var file = this.files[0]; 
    fr = new FileReader; 

    fr.onloadend = function() { 
     var exif = EXIF.readFromBinaryFile(new BinaryFile(this.result)); 
     alert(exif.Orientation); 
    }; 

    fr.readAsBinaryString(file); 
});

該代碼使用exif.js和binaryajax.js。

This works but only if you try it out with a ios taken on ios。我認爲android只是旋轉實際的圖像和方向總是1，所以他們甚至不寫出exif的方向。因此我們被愚蠢地認爲它不起作用。

對於確實有方向的圖像，該值是可讀的，可以如下解釋（這些是F的BTW）：

1  2  3  4   5   6   7   8 

888888 888888  88 88  8888888888 88     88 8888888888 
88   88  88 88  88 88  88 88   88 88  88 88 
8888  8888 8888 8888 88   8888888888 8888888888   88 
88   88  88 88 
88   88 888888 888888

來源

2013-04-25 18:04:54 eagspoo

嘗試包括我拒絕訪問錯誤binaryajax.js結果，因此，我無法使用此解決方案。 – 2013-10-11 15:36:04

@ObiWan - 查看已編輯的答案以獲取* binaryajax.js *文件的新鏈接。 – 2014-10-14 20:55:03

即使沒有binaryajax.js

偉大工程只要使用

EXIF.getData(changeEvent.target.files[0], function() { 
    alert(EXIF.pretty(this));        
});

另外here你可以看到另一個例子。

來源

2014-11-07 07:59:04 aesir

或者，如果你只是想方向標籤：

EXIF.getData(file, function() { 
    alert(this.exifdata.Orientation); 
});

來源

2016-04-04 01:07:21

我的兩分錢是，EXIF-JS框架不爲我工作，不是必需的。

取而代之的是你可以做的就是對你的圖像src進行'onload'，創建一個畫布，然後繪製畫布到圖像上方，這樣做是擺脫了與圖像的任何iphone相關的'exif'旋轉，因爲畫布drawImage會擦除exif數據。

抽籤完成後，你會看到你的形象「」旋轉回到它會怎樣看在PC瀏覽器

來源

2017-07-17 19:07:54 user1709076

確定照片在JavaScript中的方向？

回答

相關問題