rotate image if needed with javascript

Question

I have a preview spot to show a preview of the image before uploading, the problem is when you choose an image from your phone it appears sideways. How can I rotate the image if it needs to be rotated?

my javascript to show the preview:

<script type="text/javascript">

 function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#blah')
                        .attr('src', e.target.result)

                };

                reader.readAsDataURL(input.files[0]);
            }
        }

</script>

and the html

<img src="images/Your_Picture_Here.png" alt="" title="" class="prod_image" id = "blah"/>

service-paradis · Accepted Answer · 2014-02-18T17:52:58.873

11

I would suggest you to take a look at the github project called JavaScript-Load-Image. Every thing is there to help you out with your orientation problem. There is an online demo that you can see here.

You could use code as follow:

document.getElementById('file-input').onchange = function (e) {
    var loadingImage = loadImage(
        e.target.files[0],
        function (img) {
            document.getElementById("blah").src = img.toDataURL();
        },
        {orientation: 1}
    );
    if (!loadingImage) {
        // Alternative code ...
    }
};

Please note the option orientation: 1 to make your image well rotated.

There is 8 valid values in EXIF for the orientation, see below the letter F for the 8 different value:

1       2       3       4       5           6           7           8

000000  000000      00  00      0000000000  00                  00  0000000000
00          00      00  00      00  00      00  00          00  00      00  00
0000      0000    0000  0000    00          0000000000  0000000000          00
00          00      00  00
00          00  000000  000000

edited Feb 18 '14 at 17:52

answered Feb 17 '14 at 22:12

service-paradis

3,333
4
34
43

I tried this and it almost works! But I can get the image to go into my id the image is put at the bottom of the body. When i do `document.getElementById("blah").appendChild(img);` nothing happens at all.. – BluGeni Feb 18 '14 at 00:38
@BluGeni Try `document.getElementById("blah").src = img;` instead of `document.body.appendChild(img);` – service-paradis Feb 18 '14 at 01:04
I get `[object%20HTMLCanvasElement] 404 (Not Found)` with that – BluGeni Feb 18 '14 at 01:13
Ok, i just reread the doc for this feature. It seems to return a canvas while using the option `orientation`. So this should work: `document.getElementById("blah").src = img.toDataURL();`. I'm sorry that i cannot test it out myself. – service-paradis Feb 18 '14 at 01:21
@morgul after reorienting the image, how can I replace it in the input field so that the changed image gets submitted in the form? – Bej May 28 '19 at 11:03
@Bej, you cannot replace the input file directly, but you can send the new image using a hidden input field. This answer can help you: https://stackoverflow.com/a/51118947/2774496 – service-paradis May 28 '19 at 12:51

poitroae · Answer 2 · 2014-02-17T20:46:27.247

-2

A great way to do it is: let the browser do it. You use CSS / HTML5 instead of Javascript.

.image_rotated_by_90 {
    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg) translateY(-100%);
}

You can append the class image_rotated_by_90 dynamically to your rotated images in js. Apply it by doing

$('#my_image').addClass('image_rotated_by_90');

edited Feb 17 '14 at 20:46

answered Feb 17 '14 at 20:36

poitroae

21,129
10
63
81

`#` is not a class, it's an id. You want `.image_rotated_by_90`. – gen_Eric Feb 17 '14 at 20:37
@aoeu so i added the code to my css do i need to reference it ? or how to I make it work? – BluGeni Feb 17 '14 at 20:44
@BluGeni I added a snippet – poitroae Feb 17 '14 at 20:46
@aoeu ok this worked! but it moved my image over to the right, because of the rotate? – BluGeni Feb 17 '14 at 20:50
@BluGeni Play around with the `translateY` to fit your needs. Please also accept the answer, if it helped you :) – poitroae Feb 17 '14 at 20:54
4

This answer doesnt work because when I upload a pic not from a phone it still rotates it. I dont want to always rotate. I need to determine if it needs rotated. – BluGeni Feb 17 '14 at 20:57
Then you will need to read the Orientation tag in the image's EXIF header, draw it onto a canvas, rotated appropriately, and then turn that canvas into a data URI which you will then use for the ``'s `src` attribute. – Ray Nicholus Feb 17 '14 at 21:05
@aoeu Does your answer, answer my question "How can I rotate the image if it needs to be rotated?" maybe im doing something wrong but from what I can tell is that it will always rotate the image, I need a way to do it only if it needs to be rotated using the image data. – BluGeni Feb 17 '14 at 21:09

rotate image if needed with javascript

2 Answers2

Linked