APP手機拍攝獲取的照片顯示的角度不正確的解決方法

 

須要用到 exif.js 用來獲取圖片當前的位置狀態 ：

1 let Orientation = null
2 EXIF.getData(file, function() {　　　　//EXIF不須要咱們定義， 引入exif.js文件後可直接使用
3 　　EXIF.getAllTags(this); 
4 　　Orientation = EXIF.getTag(this,'Orientation');　　//Orientation 就能獲取到拍攝後的圖片位置狀態（爲數字）
5 });

 

 

而後經過canvas來進行角度的變換：

先建立一個image對象:

var img = new Image();

　  img.src = path     
　　//這裏的 path 是經過 FileReader 對象的方法 readAsDataURL 把原先的文件流轉換成base64格式 
　　 img.onload = function() {　　//這個時候須要等img加載完成、
　　　　　　//下面的代碼都在這裏面執行

　　　　}

 

而後建立canvas：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = w　　　　//這個變量我默認爲700
canvas.height = h　　　 //h 根據原圖片的比例以及 w 給定的值算得

而後進行旋轉：

switch(Orientation){　　//根據上面獲取的圖片的角度狀態
　　case 6: // 旋轉90度
　　　　canvas.width = h
　　　　canvas.height = w
　　　　ctx.rotate(Math.PI / 2);
　　　　ctx.drawImage(that, 0, -h, w, h);
　　　　break;
　　case 3: //旋轉180度
　　　　ctx.rotate(Math.PI);
　　　　ctx.drawImage(that, -w, -h, w, h);
　　　　break
　　case 8:
　　　　ctx.rotate(3 * Math.PI / 2);
　　　　canvas.width = h
　　　　canvas.height = w
　　　　ctx.drawImage(that, -w, 0, w, h);
　　　　break
　　default:
　　　　ctx.drawImage(that, 0, 0, w, h);
　　　　break
}var base64 = canvas.toDataURL('image/jpeg', quality);　　//從新生成一個壓縮後的base64圖片格式