[javascript] 자바스크립트를 사용하여 프린트 시에 웹 페이지를 이미지 형식으로 저장하는 방법

먼저 프로젝트에 “html2canvas” 라이브러리를 추가합니다. 다음으로 아래와 같이 스크립트를 작성하여 이미지를 생성하고 다운로드할 수 있습니다.

// html2canvas 라이브러리를 불러옵니다
import html2canvas from 'html2canvas';

// 저장할 이미지를 포함하는 요소를 선택합니다
const element = document.getElementById('target-element');

// html2canvas를 사용하여 요소를 캡처하고 이미지로 변환합니다
html2canvas(element).then(canvas => {
  // 이미지 데이터를 URL로 변환합니다
  const imgData = canvas.toDataURL('image/png');

  // 이미지로 저장할 수 있는 링크를 생성합니다
  const downloadLink = document.createElement('a');
  downloadLink.href = imgData;
  downloadLink.download = 'webpage-screenshot.png';

  // 링크를 클릭하여 이미지를 다운로드합니다
  downloadLink.click();
});

위의 코드는 “html2canvas” 라이브러리를 사용하여 웹 페이지의 특정 요소를 이미지로 캡처하고 파일로 저장하는 방법을 보여줍니다. 페이지에 “target-element”라는 id를 가진 요소가 있어야 합니다.

더 자세한 내용은 “html2canvas” 라이브러리의 문서를 참고하시기 바랍니다.