Html2canvas: Le téléchargement d'images est pivoté sur iOs

Créé le 14 juil. 2016  ·  4Commentaires  ·  Source: niklasvh/html2canvas

Salut tout le monde,

voici mon problème, lorsqu'un utilisateur télécharge une image - puis la génère en tant qu'image via html2canvas, l'image précédemment téléchargée est tournée. Seules les images téléchargées sont en cours de rotation - s'il s'agit d'éléments déjà affichés - elles ne tournent pas.

(cela n'arrive que sur iOS)

Existe-t-il une solution à ça ?

Merci pour votre temps !

Commentaire le plus utile

pour la justice en ligne :

a eu le même problème et a fini par utiliser https://github.com/blueimp/JavaScript-Load-Image

function readURL(input){
  loadImage(        input.files[0],
        function (img) {
            img.id = "uploaded_image";
            $('#uploaded_image').replaceWith(img);

            var $panzoom = $('#uploaded_image').panzoom({
              $zoomIn: $(".zoom-in"),
              $zoomOut: $(".zoom-out"),
              $zoomRange: $(".zoom-range"),
              minScale: 0.1
              //$reset: $(".reset")
          }); 

        },
        {canvas: true,orientation:true} // Options
  );

  $("#submission_upload_image").hide()
        $("#submission_upload_image").remove()


}

Tous les 4 commentaires

D'après mon expérience, les photos prises avec des appareils iOS sont toutes enregistrées en mode paysage avec la balise exif Orientation . Vous devez trouver un moyen de lire cette balise et de faire pivoter/afficher correctement l'image.

pour la justice en ligne :

a eu le même problème et a fini par utiliser https://github.com/blueimp/JavaScript-Load-Image

function readURL(input){
  loadImage(        input.files[0],
        function (img) {
            img.id = "uploaded_image";
            $('#uploaded_image').replaceWith(img);

            var $panzoom = $('#uploaded_image').panzoom({
              $zoomIn: $(".zoom-in"),
              $zoomOut: $(".zoom-out"),
              $zoomRange: $(".zoom-range"),
              minScale: 0.1
              //$reset: $(".reset")
          }); 

        },
        {canvas: true,orientation:true} // Options
  );

  $("#submission_upload_image").hide()
        $("#submission_upload_image").remove()


}

C'est vieux mais comment utiliserais-je cette fonction ?

@davidmann4 Salut David, j'ai le même problème que vous avez mentionné. Comment puis-je faire fonctionner votre correctif ?

    $('#file_output').attr('src', URL.createObjectURL(event.target.files[0]));

J'utilise ceci à partir du html2canvas pour changer le src de mon image dans mon canevas. Comment puis-je ajouter votre code à cela?

Cette page vous a été utile?
0 / 5 - 0 notes