尝试使用 jQuery 修复客户端图像的方向。 [EXIF 未定义]

Question

我正在尝试检测图像的 EXIF 数据（方向）并在选择时不旋转地显示它。对于图像预览，正在使用 FileReader API。我能够修复服务器端方向，但对于前端我遇到了麻烦。

我正在使用 this library 获取图像的 EXIF 数据。

我已经将 exif.js 导入到我的项目中。

<script src="frontend/js/exif.js">

HTML

<input id="choose-img" accept="image/*" name="image" type="file" onchange="readURLimg(this);">
<img class="img-uploaded" id="img-file">

jQuery

function readURLimg(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
         /* Check Exif and fix orientation of image */
            EXIF.getData([0], function() {
                console.log('Exif=', EXIF.getTag(this, "Orientation"));
                switch(parseInt(EXIF.getTag(this, "Orientation"))) {
                    case 2:
                        $img.addClass('flip'); break;
                    case 3:
                        $img.addClass('rotate-180'); break;
                    case 4:
                        $img.addClass('flip-and-rotate-180'); break;
                    case 5:
                        $img.addClass('flip-and-rotate-270'); break;
                    case 6:
                        $img.addClass('rotate-90'); break;
                    case 7:
                        $img.addClass('flip-and-rotate-90'); break;
                    case 8:
                        $img.addClass('rotate-270'); break;
                }
            });

            $('#img-file').attr('src', e.target.result).width('50%').height('auto');

        reader.readAsDataURL(input.files[0]);
    }
}

在我的控制台中出现此错误：

Uncaught ReferenceError: EXIF is not defined at FileReader.reader.onload

有什么建议吗？

Answer 1

这个有用吗？

function readURLimg(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = $('#img-file')
            img.attr('src', e.target.result).width('50%').height('auto');
            fixExifOrientation(img)
        }
        reader.readAsDataURL(input.files[0]);
    }
}
function fixExifOrientation($img) {
    $img.on('load', function() {
        EXIF.getData($img[0], function() {
            console.log('Exif=', EXIF.getTag(this, "Orientation"));
            switch(parseInt(EXIF.getTag(this, "Orientation"))) {
                case 2:
                    $img.addClass('flip'); break;
                case 3:
                    $img.addClass('rotate-180'); break;
                case 4:
                    $img.addClass('flip-and-rotate-180'); break;
                case 5:
                    $img.addClass('flip-and-rotate-270'); break;
                case 6:
                    $img.addClass('rotate-90'); break;
                case 7:
                    $img.addClass('flip-and-rotate-90'); break;
                case 8:
                    $img.addClass('rotate-270'); break;
            }
        });
    });
}

尝试使用 jQuery 修复客户端图像的方向。 [EXIF 未定义]

Trying to fix the orientation of image on client side with jQuery. [EXIF is not defined]

javascript

jquery

exif

exif-js