web端上傳圖片時 圖片被旋轉問題

有些時候在web端上傳圖片會遇到這種狀況，正向的圖片，上傳預覽時就被旋轉了。

發生這種狀況是由於，照片中包含不少屬性來記錄拍攝信息。
想要讀取這些屬性，須要引入EXIF（可在npm上搜索exif-js下載）

EXIF中，包含一個Orientation參數，用來記錄拍攝照片時的方向。在使用PS或者其餘軟件旋轉圖片時，圖片旋轉了，但Orientation不會改變，因爲咱們使用的圖片預覽器可以預處理圖片，使其看起來與旋轉後一致，但上傳圖片時，瀏覽器並不會預處理。因此致使圖片旋轉。

要解決這個問題，必須理解Orientation的含義，它一共含有8個值，分別是：一、二、三、四、五、六、七、8。

這8個值對應的意思是：

Orientation	釋義
1	正常
2	正常鏡像
3	順時針旋轉180°
4	順時針旋轉180°鏡像
5	順時針旋轉270°鏡像
6	順時針旋轉270°
7	順時針旋轉90°鏡像
8	順時針旋轉90°

網上有一張圖片，能夠比較直觀的看清對應關係。

代碼層面，引入exif-js後，可獲取到照片的Orientation值。
再根據Orientation來判斷如何旋轉照片。
如下是示例

EXIF.getData(file, function () {
    var Orientation = EXIF.getTag(this, "Orientation");
    console.log("Orientation>>>>>>", Orientation);

    //轉換成base64
    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = e => {

        if (Orientation == 1) {
            console.log("圖片無需處理");
        } else {
            var uploadBase64 = new Image();
            uploadBase64.src = e.target.result;

            uploadBase64.onload = function () {
                //修正旋轉圖片
                var expectWidth = uploadBase64.width;
                var expectHeight = uploadBase64.height;

                var canvas = document.createElement("canvas"),
                    ctx = canvas.getContext("2d");
                canvas.width = expectWidth;
                canvas.height = expectHeight;

                ctx.drawImage(uploadBase64, 0, 0, expectWidth, expectHeight);
                var base64 = null;

                if (Orientation !== "" && Orientation != 1) {
                    switch (Orientation) {
                        case 6:
                            console.log("順時針旋轉270度");
                            rotateImg(uploadBase64, "left", canvas);
                            break;
                        case 8:
                            console.log("順時針旋轉90度");
                            rotateImg(uploadBase64, "right", canvas);
                            break;
                        case 3:
                            console.log("順時針旋轉180度");
                            rotateImg(uploadBase64, "horizen", canvas);
                            break;
                    }
                    //輸出轉換後的base64圖片
                    var base64 = canvas.toDataURL(file.type, 1);

                    //輸出轉換後的流
                    var newBlob = _this.convertBase64UrlToBlob(base64, file.type);

                }
            };
        }
    };
})

//對圖片旋轉處理
rotateImg(img, direction, canvas) {
    console.log("開始旋轉圖片");
    //圖片旋轉4次後回到原方向
    if (img == null) return;
    var height = img.height;
    var width = img.width;
    var step = 2;

    if (direction == "right") {
        step++;
    } else if (direction == "left") {
        step--;
    } else if (direction == "horizen") {
        step = 2; //不處理
      }
    //旋轉角度以弧度值爲參數
    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;
    }
    console.log("結束旋轉圖片");
}

這樣就能夠解決，web端上傳圖片時，圖片被旋轉的問題啦。