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

Posted 2021-03-26 进击的Archer

　　下载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);
        }
      }
    });
  });
}