[JQuery] html2canvas 이미지 저장 (div 영역 이미지 캡쳐)

■ JQuery html2canvas div 이미지 저장 (div 영역 이미지 캡쳐)

---

* html2canvas.js파일은 하단 링크에서 다운로드

html2canvas.hertzen.com

html2canvas - Screenshots with JavaScript

■ 사용법

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

<script src="/js/html2canvas.js"></script>
<script type="text/javascript">
  //이미지(png)로 다운로드
  function downImg(){
      html2canvas($("#tmpImgDiv")[0]).then(function(canvas){
          var myImage = canvas.toDataURL();
          downloadURI(myImage, "저장할 파일명.png") 
      });
  }

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