HTML5 캔버스와 html2canvas로 DIV를 이미지로 저장하는 방법

웹 페이지의 특정 영역(DIV)을 이미지 파일로 저장하고 싶다면, JavaScript의 html2canvas() 함수를 활용하면 됩니다. DIV 태그는 HTML 문서 내에서 하나의 구역(section)을 정의하는 요소로, 이 영역 전체를 캔버스에 렌더링한 뒤 이미지로 변환할 수 있습니다.

html2canvas는 HTML 요소를 Canvas로 그려주는 오픈소스 라이브러리입니다. 아래와 같이 CDN 스크립트를 페이지에 포함시키기만 하면 별도의 설치 과정 없이 바로 사용할 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

1단계: 이미지로 변환할 DIV 영역 정의하기

먼저 캡처하고 싶은 콘텐츠를 담고 있는 DIV 요소를 작성합니다. 아래 예제에서는 cpimg라는 ID를 가진 영역을 정의했습니다.

<div id="cpimg" style="padding: 25px;">
  <h4>Welcome</h4>
</div>

이 코드는 패딩 25px가 적용된 cpimg라는 이름의 DIV 영역을 만들며, 그 안에 "Welcome"이라는 제목이 포함되어 있습니다.

2단계: html2canvas() 함수로 이미지 변환하기

이제 html2canvas() 함수를 호출하여 해당 DIV를 캔버스로 변환합니다. 기본적인 사용 코드는 다음과 같습니다.

html2canvas(document.querySelector("#cpimg")).then(canvas => {
  document.body.appendChild(canvas);
});

이 코드는 #cpimg로 지정된 DIV 영역을 캔버스로 렌더링한 후, 완성된 캔버스를 문서 본문(body) 끝에 추가합니다. 즉, 화면에 해당 DIV의 이미지 버전이 나타나게 됩니다.

추가 팁: 생성된 이미지를 파일로 다운로드하기

화면에 표시하는 것뿐만 아니라, 캔버스의 toDataURL() 메서드를 활용하면 PNG 파일로 직접 다운로드할 수도 있습니다.

html2canvas(document.querySelector("#cpimg")).then(canvas => {
  const link = document.createElement('a');
  link.download = 'capture.png';
  link.href = canvas.toDataURL('image/png');
  link.click();
});

이처럼 html2canvas를 사용하면 복잡한 설정 없이도 웹 페이지의 원하는 영역을 손쉽게 이미지로 저장할 수 있습니다. 스크린샷 기능, 영수증·명함 생성, 공유용 카드 제작 등 다양한 상황에서 유용하게 활용할 수 있습니다.