Html2canvas: Image upload get rotated on iOs

[tibewww]

Hi All,

here is my issue, When a user upload an image - and then generate it as an image via html2canvas, the image previously uploaded get rotated. Only the image uploaded are being rotated - if it's any elemetn already bein display - they don't rotate.

( this happen only on iOS)

Is there any solution for this ?

Thank you for your time !

[Vasiliskov]

From my experience pictures taken with iOS devices are all saved in landscape mode with exif tag Orientation. You need to find a way to read this tag and rotate/display image properly.

[davidmann4]

for internet justice:

had the same problem and ended up using 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()


}

[Loki180]

This is old but how would I use this function?

[jasperplender]

@davidmann4 hi David i'm having the same problem as you mentioned. How can i get your fix to work?

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

Im using this from the html2canvas to change the src of my image in my canvas. How can i add your code to this?