Html2canvas: La carga de imágenes se rota en iOs

Creado en 14 jul. 2016  ·  4Comentarios  ·  Fuente: niklasvh/html2canvas

Hola a todos,

aquí está mi problema: cuando un usuario carga una imagen, y luego la genera como una imagen a través de html2canvas, la imagen cargada previamente se gira. Solo se gira la imagen cargada, si ya se está mostrando algún elemento, no giran.

(esto sucede solo en iOS)

Hay alguna solución para esto ?

Gracias por tu tiempo !

Comentario más útil

por la justicia en internet:

tuvo el mismo problema y terminó usando 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()


}

Todos 4 comentarios

Según mi experiencia, las imágenes tomadas con dispositivos iOS se guardan en modo horizontal con la etiqueta exif Orientation . Debe encontrar una manera de leer esta etiqueta y rotar/mostrar la imagen correctamente.

por la justicia en internet:

tuvo el mismo problema y terminó usando 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()


}

Esto es antiguo, pero ¿cómo usaría esta función?

@ davidmann4 hola David, tengo el mismo problema que mencionaste. ¿Cómo puedo hacer que tu arreglo funcione?

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

Estoy usando esto de html2canvas para cambiar el src de mi imagen en mi lienzo. ¿Cómo puedo agregar tu código a esto?

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

arzyu picture arzyu  ·  3Comentarios

wbarrantes picture wbarrantes  ·  3Comentarios

bishwapoudel picture bishwapoudel  ·  4Comentarios

kunal886496 picture kunal886496  ·  3Comentarios

anthonymejia picture anthonymejia  ·  4Comentarios