APP手机拍摄获取的照片显示的角度不正确的解决方法

 

需要用到 exif.js 用来获取图片当前的位置状态 :

1 let Orientation = null
2 EXIF.getData(file, function() {    //EXIF不需要我们定义, 引入exif.js文件后可直接使用
3   EXIF.getAllTags(this); 
4   Orientation = EXIF.getTag(this,‘Orientation‘);  //Orientation 就能获取到拍摄后的图片位置状态(为数字)
5 });

 

 

然后通过canvas来进行角度的变换:

先创建一个image对象:

var img = new Image();

   img.src = path     
  //这里的 path 是通过 FileReader 对象的方法 readAsDataURL 把原先的文件流转换成base64格式
   img.onload = function() {  //这个时候需要等img加载完成、
      //下面的代码都在这里面执行

    }

 

然后创建canvas:

var canvas = document.createElement(‘canvas‘);
var ctx = canvas.getContext(‘2d‘);
canvas.width = w    //这个变量我默认为700
canvas.height = h    //h 根据原图片的比例以及 w 给定的值算得

然后进行旋转:

switch(Orientation){  //根据上面获取的图片的角度状态
  case 6: // 旋转90度
    canvas.width = h
    canvas.height = w
    ctx.rotate(Math.PI / 2);
    ctx.drawImage(that, 0, -h, w, h);
    break;
  case 3: //旋转180度
    ctx.rotate(Math.PI);
    ctx.drawImage(that, -w, -h, w, h);
    break
  case 8:
    ctx.rotate(3 * Math.PI / 2);
    canvas.width = h
    canvas.height = w
    ctx.drawImage(that, -w, 0, w, h);
    break
  default:
    ctx.drawImage(that, 0, 0, w, h);
    break
}

var base64 = canvas.toDataURL(‘image/jpeg‘, quality);  //重新生成一个压缩后的base64图片格式

 

APP手机拍摄获取的照片显示的角度不正确的解决方法

上一篇:C# Winform中WebBrowser给网页中的input控件赋值/设置值


下一篇:Android : 跟我学Binder --- (6) JAVA实现