html2canvas

링크: https://html2canvas.hertzen.com/documentation

설치하기

npm install html2canvas

이후 html 내 head 부분에서

<script src="node_modules/html2canvas/dist/html2canvas.js"></script>

캡처하기

캡처할 영역을 id 값으로 잡아주고 html2canvas(element, options) 의 element로 넘겨주면 된다.

캡처하고 다운로드하기

document.getElementById("shot").addEventListener("click", function() {
    html2canvas(document.querySelector("#capture")).then(canvas => {
        saveAs(canvas.toDataURL('image/png'),"capture-test.png");
    });
});

function saveAs(uri, filename) {
        // 캡쳐된 파일을 이미지 파일로 내보낸다.
    var link = document.createElement('a');
    if (typeof link.download === 'string') {
        link.href = uri;
        link.download = filename;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    } else {
        window.open(uri);
    }        
}

❗ 주의: 지원하지 않는 CSS 속성이 있으므로 체크해야 함.