码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-10-12 11:10:28      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:reject   fileread   class   resolve   creat   mat   图片大小   tar   let   

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

  

 

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

标签:reject   fileread   class   resolve   creat   mat   图片大小   tar   let   

原文地址:https://www.cnblogs.com/jrg-Archer/p/11659910.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!