EXIF.js 讀取圖片的方向

一、引用exif.js

<script src="https://cdn.bootcss.com/exif-js/2.3.0/exif.min.js"></script>

//圖片方向角 added by lzk
var Orientation = null;

EXIF.getData(file, function() {
      EXIF.getAllTags(this);
      Orientation = EXIF.getTag(this, 'Orientation');
      console.log(Orientation);
});

//對圖片旋轉處理 added by lzk
function rotateImg(img, direction, canvas) {
    // 最小與最大旋轉方向，圖片旋轉4次後回到原方向  
    var min_step = 0;
    var max_step = 3;
    // var img = document.getElementById(pid);  
    if (img == null) return;
    // img的高度和寬度不能在img元素隱藏後獲取，不然會出錯  
    var height = img.height;
    var width = img.width;
    // var step = img.getAttribute('step');  
    var step = 2;
    if (step == null) {
        step = min_step;
    }
    if (direction == 'right') {
        step++;
        //旋轉到原位置，即超過最大值  
        step > max_step && (step = min_step);
    } else {
        step--;
        step < min_step && (step = max_step);
    }
    //旋轉角度以弧度值爲參數  
    var degree = step * 90 * Math.PI / 180;
    var ctx = canvas.getContext('2d');
    switch (step) {
        case 0:
            canvas.width = width;
            canvas.height = height;
            ctx.drawImage(img, 0, 0);
            break;
        case 1:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(img, 0, -height);
            break;
         case 2:
            canvas.width = width;
            canvas.height = height;
            ctx.rotate(degree);
            ctx.drawImage(img, -width, -height);
            break;
         case 3:
            canvas.width = height;
            canvas.height = width;
            ctx.rotate(degree);
            ctx.drawImage(img, -width, 0);
            break;
     }}

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
if (Orientation != undefined && Orientation != "" && Orientation != 1) {
     // 旋轉處理
     switch (Orientation) {
         case 6: //須要順時針（向左）90度旋轉
             rotateImg(this, 'left', canvas);
             break;
         case 8: //須要逆時針（向右）90度旋轉
             rotateImg(this, 'right', canvas);
             break;
         case 3: //須要180度旋轉
             rotateImg(this, 'right', canvas); //轉兩次
             rotateImg(this, 'right', canvas);
             break;
     }
} else {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}