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度。我怎么能应付这个？我见过this和this，但我不知道这些代码可以合并到我的案例中。感谢。

更新

现在我有了

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

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

3 个答案: