APP手机拍摄获取的照片显示的角度不正确的解决方法

 

需要用到 exif.js 用来获取图片当前的位置状态 ：

let Orientation = null
EXIF.getData(file, function() {　　　　//EXIF不需要我们定义， 引入exif.js文件后可直接使用
　　EXIF.getAllTags(this); 
　　Orientation = EXIF.getTag(this,'Orientation');　　//Orientation 就能获取到拍摄后的图片位置状态（为数字）
});

然后通过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图片格式