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

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

技术杂谈小彩虹2021-08-14 16:00:30410A+A-

Image

IOS拍照压缩逆时间90°

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

exif.js

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

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

exif.js Gith文档

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

Imgae

从图片中我们可以看出我们的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;
}

参考:

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们