问题
在通信体验活动
这个项目中需要用到手机上传照片,在ios低版本手机上会出现上传图片旋转的问题,因此需要对低版本上传的照片根据旋转的角度再次旋转回来。
方法
在判断角度中使用到exif信息查看器
- 首先在项目中引入exif-js-min
import exifmin from '../assets/exif-js-min'
- 获取版本信息,对ios大于13.4的系统不做图片旋转
逆时针四个方向的数字,是6、1、3、8,在ios低与13.4个高于13.4的系统中出现的是相同的,只是低于13.4的会旋转。
// 获取版本信息
getVersion (name) {
var arr = navigator.userAgent.split(' ');
var chromeVersion = '';
let result = 0;
const reg = new RegExp(name, 'i')
for(var i=0;i < arr.length;i++){
if(reg.test(arr[i]))
chromeVersion = arr[i]
}
if(chromeVersion){
result = chromeVersion.split('/')[1].split('.');
} else {
result = ['0', '0', '0'];
}
return result
},
- 对旋转的图片进行角度旋转
- 在低版本上 6:逆时针旋转的90度,需要顺时针旋转90度
- 1没有旋转
- 8顺时针旋转了90度,需要逆时针旋转90度
- 3方向倒了,旋转了180度,需要顺时针或者逆时针旋转180度
//旋转图片函数
rotateImgFun(objectURL,fileName){
let img = new Image();
img.onload = () => {
let width = img.width;
let height = img.height;
let orientation;
exifmin.getData(img).then(data => {
orientation = data.orientation || 1;
if (this.getVersion('safari')[0] >= 605 ) {
const safariVersion = this.getVersion('version')
if (safariVersion[0] > 13 && safariVersion[1] > 1) {
orientation = -1
}
} else {
// 判断 ios 版本进行处理
// 针对 ios 版本大于 13.4的系统不做图片旋转
const isIos = navigator.us