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

Question

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

我正在使用这个库来获取图像的 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]);
    }
}

在我的控制台中，我收到此错误：

未捕获的引用错误：EXIF 未在 定义 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;
            }
        });
    });
}