首页 > 移动平台 > 详细

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

时间:2019-03-13 18:37:11      阅读:205      评论:0      收藏:0      [点我收藏+]
 

需要用到 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手机拍摄获取的照片显示的角度不正确的解决方法

原文:https://www.cnblogs.com/gosh-hash/p/10524901.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!