html2canvas로 DIV 요소를 이미지로 저장하기
웹 개발을 하다 보면 화면에 표시된 특정 영역을 이미지 파일로 저장해야 하는 경우가 종종 있습니다. 이럴 때 자바스크립트의 html2canvas 라이브러리를 사용하면 서버 작업 없이 브라우저에서 DIV 요소를 그대로 캔버스로 변환한 뒤 이미지로 저장할 수 있습니다.
1. html2canvas 라이브러리 불러오기
먼저 HTML 문서에 html2canvas 스크립트를 포함시켜야 합니다. CDN을 이용하면 간단하게 추가할 수 있습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>2. 캡처할 DIV 영역 만들기
DIV 태그는 HTML 문서에서 하나의 구역(섹션)을 정의하는 요소입니다. 아래 예제는 cpimg라는 ID를 가진 DIV 영역을 나타냅니다.
<div id="cpimg" style="padding: 20px;">
<h4>Hello world</h4>
</div>3. DIV를 캔버스로 변환하기
html2canvas 함수에 캡처할 요소를 전달하면 해당 영역이 캔버스로 변환됩니다. 반환되는 Promise의 then()에서 결과 캔버스를 받아 원하는 대로 처리할 수 있습니다.
html2canvas(document.querySelector("#cpimg")).then(canvas => {
document.body.appendChild(canvas);
});위 코드는 cpimg DIV 영역을 캔버스로 변환한 후 페이지에 추가하여 화면에 표시합니다.
4. 이미지 파일로 다운로드하기
변환된 캔버스를 실제 이미지 파일로 저장하려면 toDataURL() 메서드로 데이터 URL을 생성하고, 다운로드 링크를 자동으로 클릭하도록 처리하면 됩니다.
html2canvas(document.querySelector("#cpimg")).then(canvas => {
const link = document.createElement("a");
link.download = "capture.png"; // 저장될 파일명과 확장자
link.href = canvas.toDataURL("image/png");
link.click();
});이렇게 하면 지정한 DIV 영역이 capture.png라는 이름의 이미지 파일로 다운로드됩니다. JPEG 형식이 필요하다면 toDataURL("image/jpeg")처럼 MIME 타입만 변경해 주면 됩니다.
정리
- html2canvas는 DOM 요소를 캔버스로 변환해 주는 자바스크립트 라이브러리입니다.
- querySelector()로 캡처할 DIV 요소를 선택합니다.
- toDataURL()과 download 속성을 조합하면 원하는 확장자(png, jpeg)의 이미지 파일로 저장할 수 있습니다.