需求很簡單：h5拍照上傳照片，然后顯示出來

問題在：上傳之后的圖片在PC，IOS端均能正常顯示，Android端顯示的則是被旋轉90度的。

直接上代碼

下面這個方法傳入file對象，然后會去除掉照片中的exIf信息，之后返回。用這個方法，就可以保證PC，IOS,Android端都顯示正常的圖片。

function removePicExif(file){ return new Promise((reslove) => { if (file) { let reader = new FileReader(); let image = new Image(); reader.onload = function (ev){ image.src = ev.target.result; image.onload = function (){ const ctxWidth = this.width; const ctxHeight = this.height; const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); canvas.width = ctxWidth; canvas.height = ctxHeight; ctx.drawImage(this, 0, 0, ctxWidth, ctxHeight); canvas.toBlob((blob) => { const newFile = new File([blob], file.name, { type: "image/jpeg", lastModified: Date.now(), }); reslove(newFile) }); }; }; reader.readAsDataURL(file); } }) }

下面我來說下我的研究

發現在手機垂直拍攝上傳的圖片會在Android中被旋轉后，查了很多資料，大同小異，就是獲取到圖片的EXIF信息，然后利用canvas旋轉到正確的方向。

但是，但是實際測試中，我發現并不需要利用canvas再做旋轉。

大家可以拿出手機來拍攝一下，在垂直豎拍情況下，拍攝的圖片正常。在垂直橫拍的情況下，其實拍攝的圖片也是和垂直豎拍的方向一樣的。

在垂直的情況下，你無論橫排，豎拍，倒著拍，拍出來的圖片，方向都是以豎拍方向來的，并不會因為你是倒著拿手機，手機拍出來的照片就是倒的

這是垂直豎拍

這是垂直橫拍

垂直情況下，你怎么拿手機，拍出來的方向都是一個

所以，其實手機端在拍攝的時候已經幫我們旋轉到了合適的方向，不需要我們再進行旋轉了。但是，照片信息依然保留了該照片的拍攝方向，所以，在Android上，Android再一次根據拍攝方向自動做了旋轉，結果就是轉過了，導致Android的圖片顯示不對。

所以，我們要做的，僅僅應該是取消EXIF信息，而不是旋轉。

小彩蛋，到這其實基本就結束了，但是，水平情況下呢，手機拍照又是什么情況呢

當你手機和地面平行，拍攝地面，你會發現，拍出來的照片就是最初的樣子，橫著拍，照片就是橫的，豎著拍。照片就是豎的，手機這是沒有做處理，你覺得是為什么呢

文章來源: segmentfault.com，作者：barry，版權歸原作者所有，如需轉載，請聯系作者。

原文鏈接：segmentfault.com/a/1190000038283517