• 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);
            }
          }
        });
      });
    }
    

      

  • 相关阅读:
    Spring Cloud Gateway 路由动态配置
    Spring cloud Gateway HTTS配置
    Spring Gateway 全局过滤器 Global Filters
    Spring Cloud Gateway内置GatewayFilter工厂类(四)
    Spring Cloud Gateway内置GatewayFilter工厂类(三)
    lumen框架的辅助函数
    php算法基础----时间复杂度和空间复杂度
    php数据结构之二叉树
    PHP利用二叉堆实现TopK-算法的方法详解
    php实现菲波那切数列和杨辉三角
  • 原文地址:https://www.cnblogs.com/jrg-Archer/p/11659910.html
Copyright © 2020-2023  润新知