Повернуть изображение, если необходимо, с помощью javascript

Question

У меня есть предварительное пятно, чтобы показать предварительный просмотр изображения перед загрузкой, проблема в том, когда вы выбираете изображение с вашего телефона, оно появляется сбоку. Как я могу повернуть изображение, если его нужно повернуть?

мой Javascript для предварительного просмотра:

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

и HTML

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

Answer 1

Я хотел бы предложить вам взглянуть на GitHub проект под названием JavaScript-Load-Image. Все, что вам нужно, поможет вам справиться с проблемой ориентации. Существует демонстрация онлайн, которую вы можете увидеть here.

Вы можете использовать код следующим образом:

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, чтобы сделать ваше изображение хорошо повернется.

Существует 8 допустимые значения в EXIF ​​для ориентации см ниже буквой 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');