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

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


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

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>

 

0
0
이 글을 페이스북으로 퍼가기 이 글을 트위터로 퍼가기 이 글을 카카오스토리로 퍼가기 이 글을 밴드로 퍼가기

HTML/CSS/기타

번호 제목 글쓴이 날짜 조회수
6 Datepicker + 년월만 선택하기 관리자 06-06 5,659
5 JCROP을 이용한 이미지 자르기 관리자 05-18 836
4 jquery-file-upload 관리자 05-18 1,360
3 [스크립트] printjs 관리자 12-09 959
2 [스크립트] eventSwipe. HTML에서 swipe 이벤트를 사용할 수 있도록 해줍니다. 관리자 11-01 1,087
1 [QR] 구글 API로 QR 코드 생성 / Wi-fi 접속 QR 코드 생성 관리자 10-21 3,669