Exif.js圖片旋轉修正的方法

Posted on by

本文實例為大傢分享瞭Exif.js圖片旋轉修正的具體方法，供大傢參考，具體內容如下

上傳後圖片旋轉修正

測試流程

上傳 -> base64展示 -> 獲取旋轉值 -> 修正 -> 修正後展示 -> 轉換blob和file文件供其他功能調用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    <title>測試圖片旋轉</title>
</head>
<body>
<input type="file" id="test" onchange="upload(event)">
<hr>
圖片展示：
<img src="" id="img">
<hr>
旋轉值：
<div id="rotateval"></div>
<hr>
canvas（旋轉修正後）:
<canvas id="canvas" width="100%" height="80%"></canvas>
<script src="exif.js"></script>
<script>
    function upload(e) {
        var file = e.target.files;

        var reader = new FileReader();
        reader.onload = function(e) {
            var res = reader.result;

            document.getElementById("img").setAttribute('src', res);

            EXIF.getData(file[0],
                function() {
                    var Orientation = EXIF.getTag(this, 'Orientation');

                    document.getElementById('rotateval').innerHTML = Orientation;

                    if (Orientation) {

                        var image = new Image();
                        image.src = res;
                        image.onload = function() {
                            var expectWidth = this.naturalWidth;
                            var expectHeight = this.naturalHeight;

                            if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
                                expectWidth = 800;
                                expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
                            } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
                                expectHeight = 1200;
                                expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
                            }

                            var canvas = document.getElementById("canvas");
                            var ctx = canvas.getContext("2d");
                            canvas.width = "800px"; //expectWidth;
                            canvas.height = expectHeight;
                            ctx.drawImage(this, 0, 0, expectWidth, expectHeight);

                            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;
                            }

                            function rotateImg(img, direction, canvas) {
                                //alert(img);
                                //最小與最大旋轉方向，圖片旋轉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;
                                }

                                uploadfile(canvas);
                            }

                        }
                    }

                });

        }
        reader.readAsDataURL(file[0]);

    }

    function uploadfile(canvas) {
        let src = canvas.toDataURL("image/png"); //這裡轉成的是base64的地址，直接用到img標簽的src是可以顯示圖片的

        //轉成Blob對象
        function dataURItoBlob(dataURI) { //圖片轉成Buffer

            //atob() 方法用於解碼使用 base-64 編碼的字符串。
            //base-64 編碼使用方法是 btoa() 。
            var byteString = atob(dataURI.split(',')[1]);
            var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
            var ab = new ArrayBuffer(byteString.length);
            var ia = new Uint8Array(ab);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }
            return new Blob([ab], { type: mimeString });
        }

        var blob = dataURItoBlob(src);

        console.log('二進制對象：');
        console.log(blob);

        //轉成File對象
        function dataURLtoFile(dataurl, filename) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], filename, { type: mime });
        }

        var file_b = dataURLtoFile(src, 'test.png');

        var formData = new FormData();
        var columnName = 'img';
        formData.append(columnName, file_b);
        formData.append("filetype", file_b.type);

        console.log('文件對象：');
        console.log(file_b);

    }
</script>
</body>
</html>

解決圖片自動旋轉問題

exif.js

用於從圖像文件中讀取EXIF元數據的JavaScript庫。

您可以在瀏覽器中的圖像上使用它，從圖像或文件輸入元素。
檢索EXIF和IPTC元數據。這個包也可以在AMD或CommonJS環境中使用。

註意:EXIF標準僅適用於.jpg和.tiff圖像。
這個包中的EXIF邏輯基於EXIF標準v2.2 (JEITA CP-3451，包含在這個repo中)。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery-1.7.2.min.js"></script>
    <script src="./exif.min.js"></script>
</head>

<body>

<img src="1.jpg" id="J-logo"/>
<script type="text/javascript">
    var getor = function() {
        EXIF.getData(document.getElementById("J-logo"),
            function() {
                var aaa = EXIF.getAllTags(this);
                var orp = EXIF.getTag(this, 'Orientation');
                if (orp == 1) {
                    $("#J-logo").css("transform", "rotate(0deg)");
                } else if (orp == 3) {
                    $("#J-logo").css("transform", "rotate(180deg)");
                } else if (orp == 6) {
                    $("#J-logo").css("transform", "rotate(90deg)");
                } else if (orp == 8) {
                    $("#J-logo").css("transform", "rotate(270deg)");
                }
            });
    }
    setTimeout('getor()', 1);
</script>
</body>

</html>

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：