[JavaScript] html2canvas 사용 방법

[JavaScript] html2canvas

html2canvas [링크]
웹(html)에서 화면을 캡쳐하는 기능.  실질적으로는 선택한 요소를 Canvas에 그린다.
하위 자식들까지 모두 canvas에 그릴 수 있다.

 

# Body 안의 모든 요소를 Canvas에 그릴 경우

html2canvas(document.body, {
  backgroundColor: "#000000" // 배경 색 선택. 기본값 : 흰색 
}).then(function(canvas) {     
  var base64image = canvas.toDataURL("image/png");     
  window.open(base64image , "_blank");  // Open the image in a new window 
});

 

# 특정 div만 선택할 경우

<div id="capture"> 
	// ... 
</div>

// Javascript일 경우
html2canvas(document.getElementById("capture")).then(function (canvas) {});

// JQuery일 경우
html2canvas($("capture")[0]).then(function (canvas) {});

 

# 특정 요소는 제외하고 canvas로 그릴 경우

해당 요소에 data-html2canvas-ignore="true" 를 추가해주면 해당 요소 밑 하위 자식들까지 모두 보여지지 않게 된다.

<div id="capture">
	<span>a</span>
    <span>b</span>
	<div id="hide" data-html2canvas-ignore="true">
    	<span>c</span>
    </div>
</div>

html2canvas(document.getElementById("capture")).then(function(canvas) { });

 

# 이미지(PNG)로 저장할 경우

a 태그를 만들어서 다운로드 해주면 된다.

html2canvas(document.body, {
  onrendered: function (canvas) {
    var a = document.createElement("a");
    a.href = canvas
      .toDataURL("image/jpeg")
      .replace("image/jpeg", "image/octet-stream");
    a.download = "out.jpg";
    a.click();
  },
});