APP手機拍攝獲取的照片顯示的角度不正確的解決方法
阿新 • • 發佈:2019-03-13
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對象:
varimg = 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手機拍攝獲取的照片顯示的角度不正確的解決方法