ios低版本出现上传手机照片旋转问题

在iOS低版本设备上,上传照片时存在旋转问题。通过引入exif-js-min库,针对iOS版本低于13.4的系统,对图片进行特定角度旋转修正:6代表逆时针旋转90度,需要顺时针旋转;1代表无旋转;8代表顺时针旋转90度,需要逆时针旋转;3表示图片倒置,需旋转180度。
摘要由CSDN通过智能技术生成

问题

通信体验活动这个项目中需要用到手机上传照片,在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
},
  • 对旋转的图片进行角度旋转
  1. 在低版本上 6:逆时针旋转的90度,需要顺时针旋转90度
  2. 1没有旋转
  3. 8顺时针旋转了90度,需要逆时针旋转90度
  4. 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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值