웹페이지 화면을 이미지로 저장: HTML2Canvas 활용법
웹 개발을 하다 보면 관리자 화면의 통계나 특정 화면을 이미지로 저장해야 하는 경우가 생길 수 있습니다. 보통은 스크린 캡처를 추천하는 경우가 많습니다. 캡처 프로그램을 실행해 원하는 영역을 지정하고 저장하면 간단히 해결할 수 있으니까요.
하지만 스크린 캡처로는 해결할 수 없는 상황이라면, 추가적인 개발을 통해 해결해야 할 때가 있습니다. 특히 모바일 환경에서의 이미지 저장은 고민이 되는 부분입니다.
상황 예시: 모바일에서의 영수증 이미지 저장
나: “영수증 프린트 출력이 PC에서는 되는데, 모바일에서는 안 돼요. 뺄까요?”
클라이언트: “음… 모바일에서는 이미지 저장으로 하면 안 될까요?”
나: “네… 그럼 그렇게 처리하겠습니다.”
이처럼, 모바일 환경에서 이미지로 저장해야 할 경우 HTML2Canvas라는 플러그인이 유용합니다. 이 플러그인은 화면의 특정 영역을 canvas 요소로 변환하여 이미지로 저장할 수 있습니다. 간단히 말해, 브라우저 화면을 캡처하여 이미지 파일로 만들어주는 도구입니다.
HTML2Canvas 소개
HTML2Canvas는 캡처할 영역을 지정하고 해당 내용을 이미지로 변환할 수 있는 플러그인입니다. 공식 웹사이트에서 제공하는 문서와 예제는 사용법이 매우 간단하며, 다음 링크에서 확인할 수 있습니다.
HTML2Canvas 사용 방법
- HTML에 캡처할 영역과 버튼 추가
아래는 HTML 예제 코드입니다. 캡처할 영역과 다운로드 버튼을 작성합니다.
<div id="capture_area">
<!-- 캡처할 내용 -->
캡처할 영역
</div>
<button type="button" class="btn_download">이미지 저장하기</button>- HTML2Canvas 스크립트 추가
HTML2Canvas를 다운로드한 후, JavaScript 파일을 프로젝트에 포함합니다. 아래와 같이 <script> 태그를 사용하여 추가하세요.
<script src="./js/html2canvas.min.js"></script>- JavaScript로 이미지 저장 기능 구현
아래 코드를 추가하여 버튼 클릭 시 캡처 영역을 이미지로 변환하고 다운로드할 수 있도록 구현합니다.
<script>
$(function() {
$(".btn_download").click(function(e) {
html2canvas(document.getElementById("capture_area")).then(function(canvas) {
var el = document.createElement("a"); // a 태그 생성
el.href = canvas.toDataURL("image/jpeg"); // 이미지 데이터 설정
el.download = '캡처이미지.jpg'; // 저장 파일명 설정
el.click(); // 클릭 이벤트로 다운로드 실행
});
});
});
</script>작동 원리
- 캡처 영역 변환
html2canvas(document.getElementById("capture_area"))를 통해 지정된 #capture_area 영역을 canvas 요소로 변환합니다.
- 이미지 데이터 생성
canvas.toDataURL("image/jpeg")를 사용해 캡처된 내용을 JPEG 형식의 이미지 데이터로 변환합니다.
- 다운로드 설정
동적으로 생성한 <a> 태그의 href 속성을 이미지 데이터로 지정하고, download 속성을 통해 파일명을 설정합니다.
- 자동 다운로드
el.click()로 생성된 <a> 태그를 클릭 이벤트를 실행하여 다운로드를 자동으로 시작합니다.
이 스크립트를 사용하면 PC와 모바일 환경 모두에서 정상적으로 캡처 영역을 이미지로 저장할 수 있습니다. 특히 캡처 영역에 canvas로 생성된 그래프나 차트가 포함되어 있어도 이미지로 잘 변환됩니다.
HTML2Canvas는 화면을 이미지로 저장해야 할 때 매우 유용한 도구입니다. 특히 모바일 환경에서 간단히 구현할 수 있어 효율적입니다. 필요할 때 복잡한 개발 없이도 쉽게 적용할 수 있으니, 웹 개발 중 화면 캡처가 필요하다면 활용해보세요.