如何在使用 JavaScript 以正确的方向上传之前预览图像？

Question

我有一个上传按钮，我希望用户能够在单击“保存”之前预览图像。我有

<input type="file" accept="image/*" id="avatarInput" onchange="PreviewImage();"/>

作为我的 HTML 和我的 JS：

      function PreviewImage() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("avatarInput").files[0]);                

            oFReader.onload = function (oFREvent) {
                $('.image').attr('src', oFREvent.target.result);
            };
        };

但是现在，当我尝试在手机上上传人像图像时，预览图像旋转了 90 度。我该如何应对？我已经看到了这个和这个，但我不知道这些代码可以包含在我的案例中。谢谢。

更新：

我现在有

function PreviewImage() {                   

                var oFReader = new FileReader();                                            
                oFReader.onloadend = function () {
                    var showPicture = $('.mainavatar img');                     
                    var exif;                       
                    exif=EXIF.readFromBinaryFile(new BinaryFile(this.result));                  
                    console.log(exif);                  
                    $('.mainavatar img').attr('src', this.result);
                };          
                oFReader.readAsBinaryString(document.getElementById("avatarInput").files[0]);

            };

包含 exif.js 和 binary.js，但出现错误 Uncaught TypeError: First argument to DataView constructor must be an ArrayBuffer

Answer 1

我用画布来旋转。我不知道如何使用 exif.js，所以我使用了其他库。

或许还有一种使用 css 的方法。

function PreviewImage() {
    var file = document.getElementById("avatarInput").files[0];
    if (!file.type.match('image/jpeg.*')) {
        // processing without jpeg
    }

    var reader = new FileReader();
    reader.onload = function(e) {
        var exif = piexif.load(e.target.result);
        var image = new Image();
        image.onload = function () {
            var orientation = exif["0th"][piexif.ImageIFD.Orientation];

            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            var ctx = canvas.getContext("2d");
            var x = 0;
            var y = 0;
            ctx.save();
            if (orientation == 2) {
                x = -canvas.width;
                ctx.scale(-1, 1);
            } else if (orientation == 3) {
                x = -canvas.width;
                y = -canvas.height;
                ctx.scale(-1, -1);
            } else if (orientation == 4) {
                y = -canvas.height;
                ctx.scale(1, -1);
            } else if (orientation == 5) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                y = -canvas.width;
                ctx.scale(1, -1);
            } else if (orientation == 6) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
            } else if (orientation == 7) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                x = -canvas.height;
                ctx.scale(-1, 1);
            } else if (orientation == 8) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                x = -canvas.height;
                y = -canvas.width;
                ctx.scale(-1, -1);
            }
            ctx.drawImage(image, x, y);
            ctx.restore();

            var dataURL = canvas.toDataURL("image/jpeg", 1.0);

            $(".mainavatar img").attr("src", dataURL);
        };
        image.src = e.target.result;
    };

    reader.readAsDataURL(file);

}

https://github.com/hMatoba/piexifjs