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

웹 개발을 하다 보면 자주는 아니지만 간혹 웹페이지 화면을 이미지로 저장해야 하는 경우가 생긴다. 당연히 관리자 화면의 통계나 일부 화면을 이미지로 저장하고 싶다고 할 때는 이렇게 말을 한다.

스크린 캡처를 이용하시는게 좋을 듯 합니다.

캡처 프로그램을 실행하고 영역을 마우스로 드래그하는 과정이 귀찮을 수는 있지만... 원하는 영역만 지정해서 저장할 수 있고 정말 심플한 방법이다.
중요한건 추가적인 개발 비용도 안든다
하지만 스크린 캡쳐만으로 해결할 수 없고 이미지로 저장해야 할 수밖에 없는 상황이 왔다.


나 : 영수증 프린트 출력이 PC버전에는 되는데 모바일에서는 안돼요. 뺄까요?
클라이언트 : 음..모바일에서는 이미지 저장으로 하면 안 될까요?
나 : 네....


잘 사용하지 않는 플러그인이지만 어쩔 수 없이 사용하게 되면서 여러분들께도 소개해드립니다.
웹페이지 화면을 이미지로 저장시킬 수 있는 플러그인 (정확히는 화면을 canvas로 변환하는...)

HTML2CANVAS

내가 원하는 영역만 지정해서 이미지화도 가능한 플러그인입니다.
웹사이트는 아래 링크를 통해 방문하시면 됩니다.
https://html2canvas.hertzen.com/

보통 플러그인 사이트 초기화면에는 사용방법이 나오는데 여기 사이트 들어가 보시면 사용방법이 굉장히 심플합니다.

html2canvas 사용법

이게 끝!!
하지만 우리는 다운로드까지 하게 할 거라서 살짝 다른 방법을 사용하도록 하겠습니다.
우선 웹사이트에서 html2canvas.min.js를 다운로드하여서 웹사이트에 인클루드 해주셔야겠죠?

<script src="./js/html2canvas.min.js"></script>

그리고 필요한 스크립트 코드를 넣어줍니다.

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

.btn_download 버튼을 클릭했을 때 #capture_area 영역 안의 내용을 canvas로 변환하여 canvas변수에 담기에 됩니다.
이걸 el 변수에 a태그를 만들어 href를 canvas정보로 지정해줍니다. 그리고 download 설정으로 파일명을 설정해 줍니다.
마지막을 el.click()을 실행해주면 a태그를 클릭해주면서 다운로드가 실행되게 됩니다.
PC, 모바일 모두 잘 작동하고 캡처 영역에 canvas로 된 그래프 같은 내용이 있을 경우에도 모두 저장이 잘 됩니다.

화면을 이미지로 저장해야 하는 경우가 생길 때 당황하지 마시고 canvas2html 플러그인을 사용해서 간단하게 해결하세요.
내용 중에 이해가 안 되시는 부분은 댓글로 남겨주세요.