CODEWITHSUNDEEP
javascript
BluGeni
BluGeni

Reputation: 3454

rotate image if needed with javascript

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"/>

Upvotes: 7

Views: 13526

Answers (2)

service-paradis
service-paradis

Reputation: 3397

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

Upvotes: 11

poitroae
poitroae

Reputation: 21357

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

Upvotes: -2

Related Questions