如何在用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

Answer 2

但是，获取DataView构造函数的第一个参数必须是ArrayBuffer错误。

function chooseFile() {

        var file = $('#file').prop('files')[0];
        var fileReader = new FileReader();

        fileReader.onload = function (event) {
            var arrayBuffer = base64ToArrayBuffer(this.result);
            var exif = EXIF.readFromBinaryFile(new BinaryFile(arrayBuffer));

            console.log(exif.Orientation);
        };

        fileReader.readAsDataURL(file);
    }

function base64ToArrayBuffer(base64) {
        base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
        var binary_string = window.atob(base64);
        var len = binary_string.length;
        var bytes = new Uint8Array(len);
        for (var i = 0; i < len; i++) {
            bytes[i] = binary_string.charCodeAt(i);
        }
        return bytes.buffer;
    }

Answer 3

您需要将base64字符串转换为ExifJs的ArrayBuffer：

function base64ToArrayBuffer (base64) {
    base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
    var binary_string =  window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array( len );
    for (var i = 0; i < len; i++)        {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}

你不需要BinaryFile

exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(this.result));