브라우저내에서 화면캡쳐 html2canvas

html2canvas

github : https://github.com/niklasvh/html2canvas/releases

documentation : http://html2canvas.hertzen.com/documentation.html

브라우저내에서 화면캡쳐해서 저장하는데 사용할 수 있다.

canvas를 사용하니 html5이상에서만 될 듯 하다.

화면내에서 다음지도와 같이 다른 사이트의 내용을 불러오는 경우 option을 이용하여 캡쳐를 할 수는 있으나 저장이 되지는 않는다.

var element = $("#visitMap"); // global variable

var getCanvas; // global variable

 

//캡쳐

    $("#btn-Preview-Image").on('click', function () {

    html2canvas(element, {

          onrendered: function (canvas) {

                $("#previewImage").append(canvas);

                getCanvas = canvas;

             }

         });

   

   

    });

//저장

$("#btn-Convert-Html2Image").on('click', function () {

   var imgageData = getCanvas.toDataURL("image/png");

   // Now browser starts downloading it instead of just showing it

   var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");

   $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);

});

});