How to adjust the orientation of a image in order to show proper preview of the image?

Question

I have developed a laravel web application which has a function of accepting images uploaded by users and then display it. I had encountered a problem while testing as photos uploaded using mobile phones were rotating 90 degrees in anti clock wise direction I used image intervention to solve that issue . But as i am showing a preview of the uploaded image to the users using javascript the images are rotated 90 degrees but when i save the image it becomes proper. My javascript code is

    function imagePreview(input,elm) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(elm).css("background-image","url('"+e.target.result+"')");
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#settings_img").on("change",function(){
        imagePreview(this,"#settings_img_elm");
    });

can anyone please help me to properly orient the preview image by editing the code above so that the orientation of the image changes when needed.

Does this answer your question? [JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images](https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images) — Nick, Dec 27 '19 at 05:24
i tried those codes but i couldnt get a proper output i am new in web development and therefore i want someone to edit my code for me@Nick — Jeffrin Jose, Dec 27 '19 at 05:38

thingEvery · Accepted Answer · 2019-12-30T02:46:53.183

4

How about just rotating the image with CSS?

reader.onload = function (e) {
    $(elm).css({
        "background-image":"url('"+e.target.result+"')",
        "transform": "rotate(90deg)"
    });
}

Edit: Well, after a brief dive into the world of EXIF data, I think I might have a solution for you. I borrowed Ali's getOrientation() function, as @Nick suggested, and then I just corrected the orientation with CSS as follows:

function correctOrientation(element, orientation){
    switch (orientation) {
      case 2: $(element).css("transform", "scaleX(-1)");
        break;
      case 3: $(element).css("transform", "rotate(180deg)");
        break;
      case 4: $(element).css("transform", "rotate(180deg) scaleX(-1)");
        break;
      case 5: $(element).css("transform", "rotate(-90deg) scaleX(-1)");
        break;
      case 6: $(element).css("transform", "rotate(90deg)");
        break;
      case 7: $(element).css("transform", "rotate(90deg) scaleX(-1)");
        break;
      case 8: $(element).css("transform", "rotate(-90deg)");
        break;
      default: break;
    }
}

fiddle

And if you need example files to test it, get them here.

Edit: Placing the uploaded image in an <img> instead of the div's background-image: https://jsfiddle.net/ynzvtLe2/2/

edited Dec 30 '19 at 02:46

answered Dec 29 '19 at 06:01

thingEvery

3,368
1
19
25

the problem with this is there are phones which previews image with proper orientation, therefore css rotate will mess with those images@thingEvery – Jeffrin Jose Dec 29 '19 at 06:14
i just want to know how to put this in my code i am new in this field could u please put this code in the above given code in the question – Jeffrin Jose Dec 29 '19 at 13:45
@JeffrinJose Yeah, bro. I did that. Just go here https://jsfiddle.net/n5sm7ucf/1/ and copy everything from the javascript box. (Replace your JS code with that.) Oh, you'll need the CSS too. Although, you can use jQuery to add that programmatically if you really wanted to, just as you did in your 'imagePreview' function. – thingEvery Dec 29 '19 at 14:26
@JeffrinJose If you're still stuck, @ me. – thingEvery Dec 29 '19 at 15:53
thanks a lot for your help i am actually using php for uploading and displaying file only the preview part is done by js i am working on laravel – Jeffrin Jose Dec 29 '19 at 17:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205033/discussion-between-thingevery-and-jeffrin-jose). – thingEvery Dec 29 '19 at 17:20

score 2 · Answer 2 · answered Dec 29 '19 at 11:24

This should work. Here I get the original orientation of the image file and then build out a canvas with appropriate rotation correction. We then set the correctly rotated image as preview.

function imagePreview(input,elm) {
    // image file
    var file = input.files[0]; 

    if (!file.type.match('image/jpeg.*')) {
        // image is not a jpeg, do something?
    }

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

            // Build a temperory canvas to manipulate image to required 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);

            // set the preview image to your element
            $(elm).css("background-image","url('"+dataURL+"')");
        };
        image.src = e.target.result;
    };

    reader.readAsDataURL(file);

}


$("#settings_img").on("change",function(){
    imagePreview(this,"#settings_img_elm");
});

Make sure to include this library first: https://github.com/hMatoba/piexifjs

I got help from the documentation: https://readthedocs.org/projects/piexif/downloads/pdf/latest/

if I substitute this code in my javascript file in place of the above given code then will everything will work properly??? — Jeffrin Jose, Dec 29 '19 at 12:55
i didnt include any library do ineed to download this github file?? — Jeffrin Jose, Dec 29 '19 at 13:49
@JeffrinJose in the github repo I linked in my answer download the latest piexifjs zip, extract contents, you will find a piexif.js file include that in your html — Sapnesh Naik, Dec 29 '19 at 13:50
@ Sapnesh Naik will giving this command on my composer do the work "npm install piexifjs@1.0.4 " — Jeffrin Jose, Dec 29 '19 at 13:55
You can try that, if it does not work then you need to include the js file manually — Sapnesh Naik, Dec 29 '19 at 13:55

How to adjust the orientation of a image in order to show proper preview of the image?

2 Answers2

Linked