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

  

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

时间: 2024-07-29 08:15:08

exif.js 实现图片旋转到正常的相关文章

js获取图片的EXIF,解决图片旋转问题

相信大家在做项目的时候会遇到在canvas里加入图片时,图片发生90°,180°的旋转.当时的你肯定时懵逼的,为毛. 其实这就是图片的EXIF搞的鬼. 什么是EXIF 简单来说,Exif 信息就是由数码相机在拍摄过程中采集一系列的信息,然后把信息放置在我们熟知的 JPEG/TIFF 文件的头部,也就是说 Exif信息是镶嵌在 JPEG/TIFF 图像文件格式内的一组拍摄参数,它就好像是傻瓜相机的日期打印功能一样,只不过 Exif信息所记录的资讯更为详尽和完备.Exif 所记录的元数据信息非常丰富

Exif.js获取图片的详细信息(苹果手机移动端上传图片旋转90度)

Exif.js插件介绍 http://code.ciaoca.com/javascript/exif-js/ iOS手机竖着拍的照片经过前端处理之后被旋转了90°的原因以及解决方案 https://www.jianshu.com/p/ad4501db178e 原文地址:https://www.cnblogs.com/fps2tao/p/9208240.html

【js】js 让图片旋转

 转http://www.cnblogs.com/ustcyc/p/3760116.html 核心: canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + costheta + ",M12=" + (-sintheta) + ",M21=" + sintheta + ",M22=" + costheta + ",SizingMe

rotate.js实现图片旋转 (chrome,IE,firefox都可以实现)

找了好多资料,要么是IE可以用,但是谷歌不行,,还有就是两个都可以用的,图片大小显示不全.终于找到一个好一点的js,先贴一下代码. 1.rotate.js jQuery.fn.rotate = function(angle,whence) { var p = this.get(0); // we store the angle inside the image tag for persistence if (!whence) { p.angle = ((p.angle==undefined?0:

jQuery旋转插件jquery.rotate.js 让图片旋转

演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ $(this).rotate({animateTo: 180}); }, mouseout : function(){ $(this).rotate({animateTo: 0}); } } }); 演示3 不停旋转 var angle = 0; setInterval(function(){ an

JS框架_(coolShow.js)图片旋转动画特效

coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>coolShow.js插件图片旋转动画特效</title> <link href="css/coolShow.css" rel="

ios系统 竖屏拍照 canvas处理后 图片旋转(利用exif.js解决ios手机上传竖拍照片旋转90度问题)

转:https://www.cnblogs.com/lovelgx/articles/8656615.html ---恢复内容开始--- 问题:html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 解决方法:利用exif.js解决ios手机上传竖拍照片旋转90度问题 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见 htt

利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见  http://code.ciaoca.com/javascript/exif-js/ 这里主要用到Orientation属性. Orientation属性说明如下: 旋转角度 参数 0° 1 顺时针90° 6 逆时针9

js无刷新上传图片,服务端有生成缩略图,剪切图片,iphone图片旋转判断功能

html: <form action="<{:AppLink('circle/uploadimg')}>" id="imageform" method="post" enctype="multipart/form-data">     <input name="photoimg" type="file" id="xwzx_f" style