[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” 라이브러리의 문서를 참고하시기 바랍니다.