利用 exif.js 解决 ios 手机上传竖拍照片旋转 90 度问题
我的项目是Vue
+Vant
,今天在写上传头像的功能时发现,苹果手机上传的话照片会自动旋转 90 度,安卓和 PC 端则不会。花了一上午的时间解决了这个问题。
我们首先需要安装一个包:npm install exif-js --save
然后在项目中导入:import EXIF from "exif-js"
js
img.onload = () = >{
// 处理图片在ios下自动旋转问题
let imgStyle = 'rotate(0deg)'
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
EXIF.getData(img,
function() {
EXIF.getAllTags(this);
let Orientation = 1;
Orientation = EXIF.getTag(this, 'Orientation');
switch (Orientation) {
case 6:
//需要顺时针(向左)90度旋转
imgStyle = 'rotate(-90deg)';
break;
case 8:
//需要逆时针(向右)90度旋转
imgStyle = 'rotate(90deg)';
break;
case 3:
//需要180度旋转
imgStyle = 'rotate(180deg)';
break;
}
});
}
}