Html2canvas: iOS์—์„œ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ๊ฐ€ ์ˆœํ™˜๋ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2016๋…„ 07์›” 14์ผ  ยท  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 ์•ˆ๋…•ํ•˜์„ธ์š” David ๋ง์”€ํ•˜์‹  ๊ฒƒ๊ณผ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ˆ˜์ • ์‚ฌํ•ญ์ด ์ž‘๋™ํ•˜๋„๋ก ํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ํ•ฉ๋‹ˆ๊นŒ?

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

๋‚ด ์บ”๋ฒ„์Šค์—์„œ ๋‚ด ์ด๋ฏธ์ง€์˜ src๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•ด html2canvas์—์„œ ์ด๊ฒƒ์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์— ์ฝ”๋“œ๋ฅผ ์–ด๋–ป๊ฒŒ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰