[Javascript] html2canvas 를 이용한 특정 영역 이미지 저장

• 라이브러리는 사이트에서 다운로드

html2canvas.hertzen.com

html2canvas - Screenshots with JavaScript

 

• 사용방법

<script src="/js/html2canvas.js"></script>
<script type="text/javascript">
  function downImg(){
      html2canvas($("#imgDiv")[0]).then(function(canvas) {
          var img = canvas.toDataURL();
          var fileNm = "파일명";
          downloadURI(img, filNm + ".png") 
      });
  }

  function downloadURI(uri, name){
      var link = document.createElement("a")
      link.download = name;
      link.href = uri;
      document.body.appendChild(link);
      link.click();
  }
</script>

<div id ="imgDiv"></div>
<button type="button" onclick="downImg()">이미지로 저장</button>