exif.js 实现图片旋转到正常


  下载exif.js
  npm install exif-js --save
  引入exif.js
  import EXIF from 'src/utils/exif-js';
//旋转图片到正常
const _rotateImg = (imgFile) => {
  return new Promise((resolve, reject) => {
    EXIF.getData(imgFile, function () {
      let exifTags = EXIF.getAllTags(this);
      let reader = new FileReader();
      reader.readAsDataURL(imgFile);
      reader.onload = e => {
        let imgData = e.target.result;
        // 8 表示 顺时针转了90
        // 3 表示 转了 180
        // 6 表示 逆时针转了90
        if (
          exifTags.Orientation == 8 ||
          exifTags.Orientation == 3 ||
          exifTags.Orientation == 6
        ) {
          //翻转
          //获取原始图片大小
          const img = new Image();
          img.src = imgData;
          img.onload = function () {
            let cvs = document.createElement('canvas');
            let ctx = cvs.getContext('2d');
            //如果旋转90
            if (
              exifTags.Orientation == 8 ||
              exifTags.Orientation == 6
            ) {
              cvs.width = img.height;
              cvs.height = img.width;
            } else {
              cvs.width = img.width;
              cvs.height = img.height;
            }
            if (exifTags.Orientation == 6) {
              //原图逆时针转了90, 所以要顺时针旋转90
              ctx.rotate(Math.PI / 180 * 90);
              ctx.drawImage(
                img,
                0,
                0,
                img.width,
                img.height,
                0,
                -img.height,
                img.width,
                img.height
              );
            }
            if (exifTags.Orientation == 3) {
              //原图逆时针转了180, 所以顺时针旋转180
              ctx.rotate(Math.PI / 180 * 180);
              ctx.drawImage(
                img,
                0,
                0,
                img.width,
                img.height,
                -img.width,
                -img.height,
                img.width,
                img.height
              );
            }
            if (exifTags.Orientation == 8) {
              //原图顺时针旋转了90, 所以要你时针旋转90
              ctx.rotate(Math.PI / 180 * -90);
              ctx.drawImage(
                img,
                0,
                0,
                img.width,
                img.height,
                -img.width,
                0,
                img.width,
                img.height
              );
            }
            resolve(cvs.toDataURL('image/png'));
          }
        }
        else {
          resolve(imgData);
        }
      }
    });
  });
}

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM