Les images sont en cours de rotation par défaut lors du téléchargement

Question

J'essaie de prendre une photo et de télécharger la même chose dans mon application en utilisant Samsung S7. Mais l'image est en rotation lors du téléchargement. Même si je sélectionne également l'image de la galerie, elle est pivotée lors du téléchargement. Y at-il quelque chose que nous pouvons réparer à partir du code jquery. Veuillez suggérer. Merci à l'avance

HTML:

<div class="photo-div" id="photo"> 
       <img id="uploadimage" src="" hidden=""> 
      </div> 

<label id="files-label" for="files" class=" myprofile-btn-bold">Replace Image</label> 
<input id="files" style="display:none;" type="file" accept="image/*" onchange="readURL(this);"> 

Jquery:

function readURL(input) { 

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

     reader.onload = function (e) { 
      $('#files-label').html('Replace Image'); 
      $('.photo-image').removeClass('photo-image'); 
      $('#uploadimage').attr('src', e.target.result); 
      $("#headshot-message").hide(); 
      $("#headshot-cancel").hide(); 
      $('#noimage-label').addClass('hidden'); 
     } 

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

Answer 1

Votre téléphone application appareil photo ne tourne pas autour et enregistrer les images que vous les voyez de votre point de vue, mais il les signale juste avec EXIF orientation data du capteur d'orientation. Cette information est interprétée par votre application de galerie, mais votre navigateur l'ignorera et affichera les images telles qu'elles ont été prises par la perspective des capteurs.

Vous pouvez tourner les images autour d'après les données EXIF ​​sur un serveur avec imagemagick auto-orient:

convert uploadedImage.jpg -auto-orient turnedImage.jpg 

Ou sur le côté client avec jQuery comme expliqué dans ce post:

https://stackoverflow.com/a/28843763/2346308