1. 程式人生 > >APP手機拍攝獲取的照片顯示的角度不正確的解決方法

APP手機拍攝獲取的照片顯示的角度不正確的解決方法

exif 當前 spa 角度 on() image asc ade light

需要用到 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手機拍攝獲取的照片顯示的角度不正確的解決方法