关于uniapp部分手机拍照或图片上传的旋转问题解决

uniapp虽然在某种情况下是个很好用的框架，但还是避免不了踩坑，而坑在社区或官网或百度里都没法找到能立即适用的解决方案。今天遇到的一个大问题就是使用uni.chooseImage上传图片或者拍照在部分手机上图片出现旋转，同时就算设置了压缩结局还是没有压缩图片的问题。

今天我给大家一份完整的解决方案，就目前运行的项目来说，oppo, 小米，苹果的手机出现旋转角度有顺时针，逆时针90度以及旋转180度等问题，目前测试均无问题。

因时间问题，有些地方代码不一定是最简洁的，大家如果有更好的方式欢迎大家留言，共同学习进步。

第一步，我们必须要知道图片旋转的方向（exifjs库是可以拿到图片的很多信息包括方向，但在uniapp中无法使用，所以这里没有用，但大家可以尝试），uni.getImageInfo号称是可以拿到该值，但经过实验没有拿到，所以我换了种方式，该方式其实在网上也可搜索到，我们直接看源码:

export const common = {
    // 这里的获取exif要将图片转ArrayBuffer对象，这里假设获取了图片的baes64
    // 步骤一
    // base64转ArrayBuffer对象
    base64ToArrayBuffer: (base64) => {
        base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, ''); 
        var binary = atob(base64); //atob() 方法用于解码使用 base-64 编码的字符串，windows对象里的方法
        var len = binary.length;  
        var buffer = new ArrayBuffer(len);  // 创建一个binary.length字节的ArrayBuffer
        var view = new Uint8Array(buffer);//创建一个buffer的引用，类型是Uint8，起始位置在0，结束位置为缓冲区尾部
        for (var i = 0; i < len; i++) {
            view[i] = binary.charCodeAt(i); //在引用指定位置里存入指定位置的字符的 Unicode 编码
        }
        return buffer; //最终生成一个数组缓冲区，里面存储了该base64图片的二进制信息 ，为了后续通过底层接口拿到多种数值类型
    },
    // 步骤二，Unicode码转字符串
    // ArrayBuffer对象 Unicode码转字符串
    getStringFromCharCode: (dataView, start, length) => {
        var str = '';
        var i;
        for (i = start, length += start; i < length; i++) {
            str += String.fromCharCode(dataView.getUint8(i));
        }
        return str; //将第一步中的二进制ArrayBuffer对象生成的unicode的码转成字符串
     },

    // 步骤三，获取jpg图片的exif的角度（在ios体现最明显）下面很多都是为了获取图片数值的底层信息，陌生的大家可以一个个查，或者去看extjs官网
    getOrientation: (arrayBuffer) => {
        var dataView = new DataView(arrayBuffer); //可以从 二进制[`ArrayBuffer`]对象中读写多种数值类型的底层接口
        var length = dataView.byteLength;
        var orientation;
        var exifIDCode;
        var tiffOffset;
        var firstIFDOffset;
        var littleEndian;
        var endianness;
        var app1Start;
        var ifdStart;
        var offset;
        var i;
        // Only handle JPEG image (start by 0xFFD8)
        if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {
            offset = 2;
            while (offset < length) {
                if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {
                    app1Start = offset;
                    break;
                }
                offset++;
            }
        }
        if (app1Start) {
            exifIDCode = app1Start + 4;
            tiffOffset = app1Start + 10;
            if (common.getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {
                endianness = dataView.getUint16(tiffOffset);
                littleEndian = endianness === 0x4949;

                if (littleEndian || endianness === 0x4D4D /* bigEndian */ ) {
                    if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {
                        firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);

                        if (firstIFDOffset >= 0x00000008) {
                            ifdStart = tiffOffset + firstIFDOffset;
                        }
                    }
                }
            }
        }

        if (ifdStart) {
            length = dataView.getUint16(ifdStart, littleEndian);
            var standalone = window.navigator.standalone,
                userAgent = window.navigator.userAgent.toLowerCase(),
                safari = /safari/.test(userAgent),
                ios = /iphone|ipod|ipad/.test(userAgent);
        
            for (i = 0; i < length; i++) {
                offset = ifdStart + i * 12 + 2;
                if (dataView.getUint16(offset, littleEndian) === 0x0112 /* Orientation */ ) {

                    // 8 is the offset of the current tag's value
                    offset += 8;

                    // Get the original orientation value
                    orientation = dataView.getUint16(offset, littleEndian);

                    // Override the orientation with its default value for Safari (#120)
                    // if (IS_SAFARI_OR_UIWEBVIEW) {
                    //  dataView.setUint16(offset, 1, littleEndian);
                    // }
                    if (ios) {
                        if (!standalone && safari) {
                            dataView.setUint16(offset, 1, littleEndian);
                        } else if (standalone && !safari) {
                            //standalone
                        } else if (!standalone && !safari) {
                            dataView.setUint16(offset, 1, littleEndian);
                        };
                    } 
                    break;
                }
            }
        }
        return orientation;
    }
}

第二步，获取图片的旋转方向并压缩：

urlTobase64(url) {
   uni.request({
      url: url,
      method: 'GET',
      responseType: 'arraybuffer',
      success: (res)=> {
        let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64
        base64 = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
        const or=common.getOrientation(common.base64ToArrayBuffer(base64))
        this.or=or
        this.compressImg(base64,or)
      }
   });
},

第三步，对需要旋转的图片旋转，压缩，这里设置的canvas的width=300,height=400。里面值需要以此为参考换算:

compressImg(img,or){
    const ctx = uni.createCanvasContext('myCanvas')
    console.log(or)
      if(or==6){//逆时针旋转了90
      ctx.translate(300,0)
      ctx.rotate(Math.PI/2)
      ctx.drawImage(img, 0, 0,400, 300)
    }else if(or==3){//逆时针旋转了180
        ctx.translate(300,400)
        ctx.rotate(Math.PI)
        ctx.drawImage(img, 0, 0,400, 300)
    }else if(or==8){//顺时针旋转90
        ctx.translate(0,400)
        ctx.rotate(-Math.PI/2)
        ctx.drawImage(img, 0, 0,400, 300)
    }else{
        ctx.drawImage(img, 0, 0,300, 400)
    }
    ctx.draw(false,()=>{
        uni.canvasToTempFilePath({
             x: 0,
             y: 0,
              width: 300,
              height:400,
              destWidth:300,
              destHeight:400,
              fileType:'jpg',
               canvasId: 'myCanvas',
               success:(res)=> {
                this.img=res.tempFilePath
               },
                fail:(err)=>{
                    this.img=img
                }
            })
        })
    },

第四步，通过uni.chooseImage上传图片：

// 选择图片
ChooseImage() {
    uni.showLoading({
        title: '照片获取中',
        mask: true
     });
        uni.chooseImage({
        count: 1, //默认9
        sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择
    success: (res) => {
        this.urlTobase64(res.tempFilePaths[0])
        uni.hideLoading()
    },
    fail:(err)=>{
        uni.hideLoading()
    }
  });
},          

至此，一套完整的方案就已经产生了。希望能帮到需要的朋友。