Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

HTML5 Canvas로 웹페이지 스크린샷 찍는 방법 – html2canvas 활용 가이드

웹 개발을 하다 보면 페이지 전체 또는 특정 영역의 스크린샷을 캡처해야 하는 경우가 있습니다. html2canvas는 이러한 작업을 손쉽게 처리할 수 있는 대표적인 자바스크립트(JavaScript) 라이브러리입니다.

html2canvas의 동작 원리

흥미로운 점은 html2canvas가 실제로 화면을 '캡처'하는 것이 아니라는 사실입니다. 이 라이브러리는 페이지의 DOM 정보와 CSS 스타일을 읽어 들인 후, 이를 기반으로 HTML5 Canvas에 동일한 화면을 다시 그려냅니다. 즉, 실제 스크린샷이 아니라 페이지 정보를 바탕으로 재구성한 뷰(view)를 생성하는 방식입니다.

html2canvas() 메서드를 호출하면 base64 형식의 값을 반환받을 수 있으며, 이 값을 활용하면 이미지 소스(image src)나 이미지 파일로 변환하는 것도 가능합니다.

기본 예제 코드

아래는 html2canvas를 사용해 페이지 스크린샷을 생성하는 기본 예제입니다. <head> 부분에서 html2canvas.js 스크립트를 로드하고, 버튼 클릭 시 screenshot() 함수가 실행되어 document.body 전체를 Canvas로 변환한 뒤 페이지 하단에 추가합니다.

<!DOCTYPE html>
<html>
   <head>
      <script src="html2canvas-master/dist/html2canvas.js"></script>
   </head>
   <body>
      <h1>Take screenshot</h1>
      <div class="container" id='container'>
         <img src='images/one.jpg' width='50' height='50'>
         <img src='images/two.jpg' width='50' height='50'>
      </div>
      <input type='button' id='but_screenshot' value='Take screenshot' onclick='screenshot();'><br/>
      <script>
         function screenshot(){
            html2canvas(document.body).then(function(canvas) {
               document.body.appendChild(canvas);
            });
         }
      </script>
   </body>
</html>

생성된 이미지를 파일로 저장하기

Canvas 객체를 이미지 파일로 다운로드하고 싶다면 toDataURL() 메서드를 활용할 수 있습니다. 아래와 같이 a 태그의 download 속성과 함께 사용하면 됩니다.

function downloadScreenshot(){
   html2canvas(document.body).then(function(canvas) {
      const link = document.createElement('a');
      link.download = 'screenshot.png';
      link.href = canvas.toDataURL('image/png');
      link.click();
   });
}

사용 시 참고 사항

  • 외부 도메인의 이미지는 CORS 정책으로 인해 캔버스에 렌더링되지 않을 수 있으므로, useCORS 옵션 설정이 필요합니다.
  • iframe, 플러그인 콘텐츠 등 일부 요소는 지원되지 않습니다.
  • 복잡한 CSS3 효과(필터, 일부 transform 등)는 완벽하게 재현되지 않을 수 있습니다.

이처럼 html2canvas를 활용하면 별도의 서버 환경 없이 순수 클라이언트 측에서 웹페이지의 스냅샷을 간편하게 만들 수 있습니다.