html코드 이미지 저장 플러그인

<div id="capture_area">
    캡쳐할 영역
</div>
<button type="button" class="btn_download">이미지 저장하기</button>

<script>
$(function(){
    $(".btn_download").click(function(e){
        html2canvas(document.getElementById("capture_area")).then(function(canvas) {
            var el = document.createElement("a")
            el.href = canvas.toDataURL("image/jpeg")
            el.download = '이미지.jpg' //다운로드 할 파일명 설정
            el.click()
        })
    })
})
</script>

 

- 플러그인 링크 : https://html2canvas.hertzen.com/

html2canvas - Screenshots with JavaScript

- 참고 : https://blog.webi.kr/64

웹페이지 화면 이미지로 저장하기 | html2cavas 플러그인