웹사이트 레이아웃을 구성하는 마크업 중 특정 부분을 이미지로 변환(캡처)한 뒤, 해당 이미지를 저장하거나 다른 용도로 활용해야 하는 경우가 종종 있습니다. 이번 글에서는 이러한 동작을 구현하는 방법을 알아보겠습니다.
다만 우리가 다루어야 할 대상은 canvas뿐만 아니라 모든 마크업 요소이기 때문에, 처음부터 직접 구현하려면 상당히 복잡해집니다. 따라서 이 작업을 손쉽게 처리하기 위해 서드파티 라이브러리인 html2canvas를 사용하겠습니다. 이름 그대로 원하는 마크업 요소를 canvas로 변환해 주며, 이후에는 canvas 요소를 이미지 파일로 간단히 다운로드할 수 있습니다.
예제 코드
실제 구현 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<style>
#capture{
height: 300px;
width: 300px;
display: flex;
flex-direction: column;
background-color: rgb(43, 216, 216);
}
span{
flex: 1;
width: 100%;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
color: #ffffff;
font-size: 20px;
}
#first{ background-color: rgb(15, 168, 15); }
#second{ background-color: rgb(43, 93, 228); }
#third{ background-color: rgb(194, 55, 13); }
</style>
<body>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
const download = () => {
html2canvas(document.querySelector('#capture')).then(canvas => {
document.body.appendChild(canvas);
});
}
</script>
<div id='capture'>
<span id='first'>First Block</span>
<span id='second'>Second Block</span>
<span id='third'>Third Block</span>
</div>
<button onclick="download()">
Download
</button>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
세 개의 색상 블록으로 구성된 div 영역 아래에 'Download' 버튼이 배치되어 있으며, 버튼을 클릭하면 캡처 기능이 동작합니다.
Download 버튼 클릭 후
버튼을 클릭하면 'Download' 버튼 옆에 캡처된 canvas 요소가 추가됩니다. 생성된 canvas 위에서 마우스 오른쪽 버튼을 클릭해 '이미지 저장'을 선택하면 로컬 저장소에 손쉽게 저장할 수 있습니다.
동작 원리 정리
1. 라이브러리 로드: CDN 링크를 통해 html2canvas 스크립트를 불러옵니다.
2. 캡처 대상 지정: document.querySelector('#capture')로 캡처할 DOM 요소를 선택합니다.
3. canvas 변환: html2canvas 함수가 Promise를 반환하며, 완료되면 canvas 객체를 전달합니다.
4. 결과 활용: 반환된 canvas를 DOM에 추가하거나 toDataURL() 메서드로 이미지 파일로 변환하여 다운로드할 수 있습니다.
이처럼 html2canvas를 활용하면 별도의 복잡한 로직 없이도 페이지의 특정 영역을 몇 줄의 코드만으로 이미지화할 수 있습니다. 참고로 외부 이미지나 특정 CSS 속성은 보안 정책(CORS)에 따라 제대로 렌더링되지 않을 수 있으므로, 실무 적용 시 이 점을 유의해야 합니다.