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

問題在：上傳之后的圖片在PC，IOS端均能正常顯示，Android端顯示的則是被旋轉(zhuǎn)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); } }) }

下面我來說下我的研究

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

但是，但是實(shí)際測試中，我發(fā)現(xiàn)并不需要利用canvas再做旋轉(zhuǎn)。

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

在垂直的情況下，你無論橫排，豎拍，倒著拍，拍出來的圖片，方向都是以豎拍方向來的，并不會因?yàn)槟闶堑怪檬謾C(jī)，手機(jī)拍出來的照片就是倒的

這是垂直豎拍

這是垂直橫拍

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

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

所以，我們要做的，僅僅應(yīng)該是取消EXIF信息，而不是旋轉(zhuǎn)。

小彩蛋，到這其實(shí)基本就結(jié)束了，但是，水平情況下呢，手機(jī)拍照又是什么情況呢

當(dāng)你手機(jī)和地面平行，拍攝地面，你會發(fā)現(xiàn)，拍出來的照片就是最初的樣子，橫著拍，照片就是橫的，豎著拍。照片就是豎的，手機(jī)這是沒有做處理，你覺得是為什么呢

文章來源: segmentfault.com，作者：barry，版權(quán)歸原作者所有，如需轉(zhuǎn)載，請聯(lián)系作者。

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

總結(jié)

以上是生活随笔為你收集整理的android上传图片被旋转,input上传照片旋转解决办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。