利用exif.js插件解决ios手机上传竖拍照片旋转90度问题
问题描述：移动端手机照片上传时，发现
手机上传竖拍图片会逆时针旋转90度，横拍照片无此问题，部分安卓手机存在此问题。
场景描述
解决思路
- 获取到照片拍摄的方向角，对非横排的ios照片进行角度旋转修正。
- EXIF.js提供了JavaScript读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、GPS地理位置等数据。我们可以通过这个插件获取到它的拍照方向Orientation属性，然后把所有的旋转了的图片都给正过来。
- Orientation属性说明
| 参数 | 旋转角度 |
|---|---|
| 1 | 0° |
| 6 | 顺时针90° |
| 8 | 逆时针90° |
| 3 | 180° |
Canvas旋转原理
-
除了canvas原点、宽度、长度的变化外，还需要用到rotate()方法来旋转当前的绘图。
以Vue为实例
步骤一 ：安装EXIF.js插件
npm install exif-js --save
步骤二：在main.js中引入该插件，并将该插件挂载在vue的原型上
import EXIF form 'exif-js'
Vue.prototype .EXIF=EXIF
步骤三 ：在具体的页面中进行使用
注意：需要将vue中的上下文this挂到其他变量上，不然会与exif.js中回调函数的this冲突。需等图片加载完成后才能画到canvas上。
change:function () {
let img =new Image();
img.src='图片路径';
img.setAttribute('crossOrigin', 'Anonymous');
img.onload=function () {
that.compressImg(img,(dataURL)=> {
//后续操
});
}
},
compressImg:function (img,callback) {
let that = this;// 需要将Vue的原型挂在that上边，否则会与exif.js中回调函数的this冲突
let canvas=document.getElementById('myCanvas');
let ctx=canvas.getContext('2d');
let initSize=img.src.length;
let width=img.width;
let height=img.height;
canvas.width = width;
canvas.height = height;
that.EXIF.getData(img,function () { //解决IOS手机竖拍图片上传旋转的问题
var imgData=that.EXIF.getAllTags(this);
if(imgData.Orientation&&imgData.Orientation!=1){
switch (imgData.Orientation){ //Orientation 拍摄方向,旋转角度
case 6: //顺时针90°
canvas.width=height;
canvas.height=width;
ctx.rotate(Math.PI/2);
ctx.drawImage(img, 0, -height, width, height);
break;
case 3: //逆时针90°
ctx.rotate(Math.PI);
ctx.drawImage(img, -width, -height, width, height);
break;
case 8: //180°
canvas.width=height;
canvas.height=width;
ctx.rotate(3*Math.PI/2);
ctx.drawImage(img, -width, 0, width, height);
break;
}
}else{
ctx.drawImage(img, 0, 0, width, height);
}
});
let dataURL = canvas.toDataURL("image/jpeg", 0.1);
callback?callback(dataURL):null; //调用回调函数
},
参考文章：https://blog.csdn.net/qq_33769914/article/details/70154655
