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

时间：2024-03-20 16:16:35

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

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

场景描述

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

解决思路

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

Canvas旋转原理

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

以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

相关文章