How can I preview image before uploading with the correct orientation with JavaScript?

Question

I have a upload button and I want users being able to preview the image before clicking 'save'. I have

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

as my HTML and for my JS:

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

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

But now, when I try to upload portrait image on my mobile, the preview image is rotated 90 degree. How can I cope with this? I've seen this and this but I don't know the codes can be incorporated in my case. Thanks.

Update:

Now I have

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

            };

with exif.js and binary.js included, but I am getting error Uncaught TypeError: First argument to DataView constructor must be an ArrayBuffer

Answer 1

I used canvas to rotate. I don't know how to use exif.js, so I used other library.

There might also be a way to use 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

Still get First argument to DataView constructor must be an ArrayBuffer error.

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