html2canvas 사용방법 - 캡처를 이미지로 다운받기

 

javascript 브라우저 화면을 캡처해서 다운로드 받게 해주는 html2canvas를 사용해봅시다

참고 : https://html2canvas.hertzen.com/

 

사용법

<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>