Html2canvas: Das Hochladen von Bildern wird auf iOS gedreht

Erstellt am 14. Juli 2016  ·  4Kommentare  ·  Quelle: niklasvh/html2canvas

Hallo alle,

Hier ist mein Problem: Wenn ein Benutzer ein Bild hochlädt und es dann über html2canvas als Bild generiert, wird das zuvor hochgeladene Bild gedreht. Nur das hochgeladene Bild wird gedreht – wenn es sich um Elemente handelt, die bereits angezeigt werden – werden sie nicht gedreht.

(Dies geschieht nur unter iOS)

Gibt es dafür irgendeine Lösung?

Vielen Dank für Ihre Zeit !

Hilfreichster Kommentar

für Internetjustiz:

hatte das gleiche Problem und landete bei der Verwendung von 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()


}

Alle 4 Kommentare

Aus meiner Erfahrung werden Bilder, die mit iOS-Geräten aufgenommen wurden, alle im Querformat mit dem Exif-Tag Orientation gespeichert. Sie müssen einen Weg finden, dieses Tag zu lesen und das Bild richtig zu drehen/anzuzeigen.

für Internetjustiz:

hatte das gleiche Problem und landete bei der Verwendung von 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()


}

Das ist alt, aber wie würde ich diese Funktion verwenden?

@davidmann4 Hallo David, ich habe das gleiche Problem wie du erwähnt hast. Wie kann ich Ihre Lösung zum Laufen bringen?

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

Ich verwende dies aus html2canvas, um die Quelle meines Bildes in meiner Leinwand zu ändern. Wie kann ich Ihren Code hinzufügen?

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

Loki180 picture Loki180  ·  4Kommentare

bishwapoudel picture bishwapoudel  ·  4Kommentare

kunal886496 picture kunal886496  ·  3Kommentare

ABHIKSINGHH picture ABHIKSINGHH  ·  3Kommentare

AlphaDu picture AlphaDu  ·  4Kommentare