zoukankan      html  css  js  c++  java
  • 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图片格式

  • 相关阅读:
    内置函数——filter和map
    递归函数
    内置函数和匿名函数
    迭代器和生成器
    装饰器函数
    函数进阶
    COGS 2533. [HZOI 2016]小鱼之美
    COGS 2532. [HZOI 2016]树之美 树形dp
    COGS2531. [HZOI 2016]函数的美 打表+欧拉函数
    bzoj1303: [CQOI2009]中位数图
  • 原文地址:https://www.cnblogs.com/gosh-hash/p/10524901.html
Copyright © 2011-2022 走看看