웹 페이지에서 특정 부분이나 전체 페이지를 이미지로 저장하는 기능은 흔히 발견되는데, 이를 자바스크립트로 처리하는 방법을 알아보겠습니다.

HTML2Canvas 라이브러리 사용하기

HTML2Canvas는 HTML과 SVG 요소를 캡처하여 이미지로 변환해주는 자바스크립트 라이브러리입니다. 이를 이용해 원하는 부분의 스크린샷을 찍어 이미지로 저장할 수 있습니다.

import html2canvas from 'html2canvas';

html2canvas(document.body).then(canvas => {
    // 캔버스 요소를 이미지로 변환
    let imgData = canvas.toDataURL('image/png');

    // 이미지 다운로드 링크 생성
    let link = document.createElement('a');
    link.href = imgData;
    link.download = 'screenshot.png';
    link.click();
});

위의 코드는 html2canvas 라이브러리를 이용하여 전체 페이지를 캡처하고, 캡처한 이미지를 다운로드하는 예시입니다.

기본 기능으로 저장하기

웹 브라우저 기본 기능을 이용하여 페이지를 이미지로 저장하는 방법도 있습니다. 예를 들어, window.print()를 호출하면 브라우저의 인쇄 기능을 실행하여 페이지를 이미지로 저장할 수 있습니다.

function captureAndPrint() {
    window.print();
}

이 방법은 브라우저의 인쇄 기능을 사용하기 때문에 페이지 전체 또는 인쇄 가능한 영역을 이미지로 저장할 수 있습니다.

이제 웹 페이지에서 자바스크립트를 사용해 캡처된 이미지를 저장하는 방법에 대해 이해하셨습니다. 다양한 상황에 맞게 적절한 방법을 선택하여 원하는 기능을 구현해보세요.