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

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

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

我已经将

exif.js

导入到我的项目中

HTML

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

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

未捕获引用错误：未在处定义EXIF FileReader.reader.onload

有什么建议吗？

这样行吗

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

这行吗

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.js可以处理filereader数据吗？从文档中，我只能看到它与图像对象一起使用。@Manueloto我试着这样做。您确定exif.js可以处理filereader数据吗？从文档中，我只能看到它与图像对象一起使用。@Manueloto我试着这样做。谢谢你的回答。但是我在控制台中没有得到任何日志，也没有显示图像预览。@Saurabh啊，好的，我编辑了我的文章。您不小心将

readAsDataURL

放在了onload函数中。它被声明为函数参数。哦，对不起，我没有看到。让我试试这一个。我仍然发现EXIF没有在这个

EXIF.getData（$img[0]，function（）上定义

谢谢你的回答。但是我没有在控制台中获得任何日志，也没有显示图像预览。@Saurabh啊，好吧，我编辑了我的帖子。你不小心把

readAsDataURL

放在了onload函数中。它被声明为函数参数。哦，对不起，我没有看到。让我试试这个。我仍然得到EXIF不是在此

EXIF.getData（$img[0]，function（））上定义