Rotate image if necessary using javascript

Question

I have a place for preview to show a preview of the image before downloading, the problem is when you select an image from your phone, it appears on the side. How can I rotate an image if it needs to be rotated?

my javascript to show a 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 html

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

Answer 1

I would suggest you take a look at the github JavaScript-Load-Image project . All you need will help you deal with the problem of orientation. There is an online demo in which you can see here .

You can use the following code:

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

orientation: 1, .

EXIF ​​ 8 , . F 8 :

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

Answer 2

: . CSS/HTML5 Javascript.

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

image_rotated_by_90 js. ,

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