jquery html2canvas div 다운로드

//div 아이디를 가지고 canvas로만들어줌

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

      

var getCanvas; // global variable

 

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

 

     html2canvas(element, {

        onrendered: function (canvas) {

               getCanvas = canvas;

            }

        });

       

   });

//다운로드

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

//익스플로러일경우

if (navigator.msSaveBlob) {

     console.log('this is IE');

     var URL=window.URL;

     var BlobBuilder = window.MSBlobBuilder;

     navigator.saveBlob=navigator.msSaveBlob;

     var imgBlob = getCanvas.msToBlob();

     if (BlobBuilder && navigator.saveBlob) {

       var showSave =  function (data, name, mimetype) {

         var builder = new BlobBuilder();

         builder.append(data);

         var blob = builder.getBlob(mimetype||"application/octet-stream");

         if (!name)

           name = "Download.bin";

         navigator.saveBlob(blob, name);

       };

       showSave(imgBlob, 'your_pic_name.png',"image/png");

     }

   } 

//크롬 또는 다른브라우저

else {

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

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

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

   }

});