Html2canvas: Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° изобраТСния поворачиваСтся Π½Π° iOS

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 14 июл. 2016  Β·  4ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: niklasvh/html2canvas

ВсСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚,

Π²ΠΎΡ‚ моя ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°: ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π·Π°Ρ‚Π΅ΠΌ создаСт Π΅Π³ΠΎ ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π· html2canvas, Ρ€Π°Π½Π΅Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ поворачиваСтся. ВращаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ - Ссли ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ элСмСнт ΡƒΠΆΠ΅ отобраТаСтся - ΠΎΠ½ΠΈ Π½Π΅ Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ΡΡ.

(это происходит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° iOS)

Π•ΡΡ‚ΡŒ Π»ΠΈ ΠΊΠ°ΠΊΠΎΠ΅-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для этого?

Бпасибо Π·Π° ΡƒΠ΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ врСмя !

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

для ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-справСдливости:

Π±Ρ‹Π»Π° Ρ‚Π° ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΈ Π² ΠΈΡ‚ΠΎΠ³Π΅ я использовал 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()


}

ВсС 4 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

По ΠΌΠΎΠ΅ΠΌΡƒ ΠΎΠΏΡ‹Ρ‚Ρƒ, всС снимки, сдСланныС Π½Π° устройствах iOS, ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ΡΡ Π² Π»Π°Π½Π΄ΡˆΠ°Ρ„Ρ‚Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅ с Ρ‚Π΅Π³ΠΎΠΌ exif Orientation . Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ способ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ этот Ρ‚Π΅Π³ ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ/ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

для ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-справСдливости:

Π±Ρ‹Π»Π° Ρ‚Π° ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΈ Π² ΠΈΡ‚ΠΎΠ³Π΅ я использовал 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()


}

Π­Ρ‚ΠΎ старо, Π½ΠΎ ΠΊΠ°ΠΊ Π±Ρ‹ я использовал эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ?

@ davidmann4, ΠΏΡ€ΠΈΠ²Π΅Ρ‚, Дэвид, Ρƒ мСня такая ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΊΠ°ΠΊ Ρ‚Ρ‹ упомянул. Как я ΠΌΠΎΠ³Ρƒ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ вашС исправлСниС Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ?

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

Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ это ΠΈΠ· html2canvas, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ src ΠΌΠΎΠ΅Π³ΠΎ изобраТСния Π½Π° ΠΌΠΎΠ΅ΠΌ холстС. Как я ΠΌΠΎΠ³Ρƒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ваш ΠΊΠΎΠ΄ ΠΊ этому?

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ