ios手机上传竖拍照片旋转90度问题

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

问题描述:移动端手机照片上传时,发现ios手机上传竖拍图片会逆时针旋转90度,横拍照片无此问题,部分安卓手机存在此问题。

场景描述

ios手机上传竖拍照片旋转90度问题_第1张图片

解决思路

获取到照片拍摄的方向角,对非横排的ios照片进行角度旋转修正。
EXIF.js提供了JavaScript读取图像的原始数据的功能扩展,例如:拍照方向、相机设备型号、GPS地理位置等数据。我们可以通过这个插件获取到它的拍照方向Orientation属性,然后把所有的旋转了的图片都给正过来。
ios手机上传竖拍照片旋转90度问题_第2张图片

Canvas旋转原理

ios手机上传竖拍照片旋转90度问题_第3张图片
除了canvas原点、宽度、长度的变化外,还需要用到rotate()方法来旋转当前的绘图。
ios手机上传竖拍照片旋转90度问题_第4张图片

以Vue为实例

步骤一 :安装EXIF.js插件

  npm  install exif-js  --save

步骤二:在main.js中引入该插件,并将该插件挂载在vue的原型上

  import  EXIF form 'exif-js'
   Vue.prototype .EXIF=EXIF

步骤三 :在具体的页面中进行使用

注意:需要将vue中的上下文this挂到其他变量上,不然会与exif.js中回调函数的this冲突。需等图片加载完成后才能画到canvas上。

	change:function () {
	        let img =new Image();
	        img.src='图片路径';
	        img.setAttribute('crossOrigin', 'Anonymous');
	        img.function () {
	          that.compressImg(img,(dataURL)=> {
	              //后续操
	          });
	       }
	  },
 compressImg:function (img,callback) {
        let that = this;// 需要将Vue的原型挂在that上边,否则会与exif.js中回调函数的this冲突
        let canvas=document.getElementById('myCanvas');
        let ctx=canvas.getContext('2d');
        let initSize=img.src.length;
        let width=img.width;
        let height=img.height;
        canvas.width = width;
        canvas.height = height;
        that.EXIF.getData(img,function () { //解决IOS手机竖拍图片上传旋转的问题
          var imgData=that.EXIF.getAllTags(this);
          if(imgData.Orientation&&imgData.Orientation!=1){
            switch (imgData.Orientation){ //Orientation 拍摄方向,旋转角度
              case 6: //顺时针90°
                canvas.width=height;
                canvas.height=width;
                ctx.rotate(Math.PI/2);
                ctx.drawImage(img, 0, -height, width, height);
                break;
              case 3: //逆时针90°
                ctx.rotate(Math.PI);
                ctx.drawImage(img, -width, -height, width, height);
                break;
              case 8:  //180°
                canvas.width=height;
                canvas.height=width;
                ctx.rotate(3*Math.PI/2);
                ctx.drawImage(img, -width, 0, width, height);
                break;
            }
          }else{
            ctx.drawImage(img, 0, 0, width, height);
          }
        });
          let dataURL = canvas.toDataURL("image/jpeg", 0.1);
          callback?callback(dataURL):null; //调用回调函数
      },

PS:本文参考了此篇文章https://blog.csdn.net/qq_33769914/article/details/70154655

你可能感兴趣的:(移动端,问题处理)