zoukankan      html  css  js  c++  java
  • 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);
            }
          }
        });
      });
    }
    

      

  • 相关阅读:
    ES vm报错
    ln -s /usr/local/jdk1.8.0_201/bin/java /bin/java
    docker压缩导入导出
    微软各种资源整理(迅雷下载),感谢站长。
    python打开文件的访问方式
    docker换源
    selinux
    ElasticsearchException: java.io.IOException: failed to read [id:0, file:/data/elasticsearch/nodes/0/_state/global-0.st]
    带了纸和笔,要记哪些东西?
    redis命令行批量删除匹配到的key
  • 原文地址:https://www.cnblogs.com/jrg-Archer/p/11659910.html
Copyright © 2011-2022 走看看