ios拍照压缩逆时间90°旋转Bug

IOS拍照压缩逆时间90°

在webview应用中，ios拍照上传canvas压缩的时候会旋转，其他机型还没有发现这种问题

exif.js

exif是识别：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。

注意：只能读取使用设备（如相机、手机、摄像头等）拍摄的照片进行测试，这样的照片才有 EXIF 数据。

exif.js Gith文档

exif.js 给出的照片方向属性如下图：

从图片中我们可以看出我们的bug是图中的6值。

具体解决

1. 引入 exif.js,github可以看到有三种方式。我们可以直接用cdn引入。

// 记得引用在方法前使用~
<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

2. 走进压缩流程代码

// imginClude64   图片不去头64编码
// type 上传图片类型 ，eg:image/jpeg
// size 上传图片大小   eg:30107
// 最大4M，最短边至少15px，最长边最大4096px
 
function canvasToLower (imginClude64, type, size) 
  let quality = setQuality(size)
  return new Promise((resolve, reject) => {
    // 没有请求过,走请求
    // 先看图片长宽大小是不是超4m，最长边最多4096px
    var thisImg = new Image();

    thisImg.src = imginClude64;
    thisImg.onload = () => {
      let imgW = thisImg.width
      let imgH = thisImg.height
      if (size > 8000) { //大于0.8m
        // 创建Canvas对象(画布)
        let canvas = document.createElement('canvas')
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext('2d')
        // 不改变宽高
        canvas.width = imgW
        canvas.height = imgH
        let orient = getPhotoOrientation(thisImg)
        // 如果exif获取的值是6，则旋转回来
        if (orient == 6) {
          context.save();
          context.translate(imgW / 2, imgH / 2);
          context.rotate(90 * Math.PI / 180);
          context.drawImage(thisImg, 0 - imgH / 2, 0 - imgW / 2, imgH, imgW);
          context.restore();
        }
        else {
          context.drawImage(thisImg, 0, 0, imgW, imgH)
        }

        let smallImg64 = canvas.toDataURL("image/jpeg", quality)
        resolve(smallImg64)
      } else {
        resolve(imginClude64)
      }
    }
  })
}

3. 获取orient值函数

//获取图片方向
function getPhotoOrientation (img) {
  var orient;
  EXIF.getData(img, function () {
    orient = EXIF.getTag(this, 'Orientation');
    console.log('orient2', orient);
  });
  return orient;
}

参考：

• 脚本之家