html2canvas 를 활용한 화면 캡쳐 및 저장하기

 

npm i html2canvas

 

위와 같이 입력하여 html2canvas 패키지 설치를 한다.

 

 

 

 

const html2canvas = require('html2canvas');

function saveScreenshot(canvas){
  const link = document.createElement("a");
  link.download = 'lukehan.png';

  canvas.toBlob(function(blob){
    link.href = URL.createObjectURL(blob);
    link.click();
  });
}

html2canvas(document.body, {
  allowTaint: true,
  useCORS: true,
  scale: 1
}).then(saveScreenshot);

위와 같이 코드를 작성하면 전체 화면을 캡쳐하여 저장할 수 있다.

 

전체 화면을 캡쳐하기 위해 html2canvas 에 document.body 를 캡쳐 대상으로 지정하였다.

scale 설정을 1로 하여 원본 크기로 지정하였다.

 

 

 

 

참고

• https://stackoverflow.com/questions/58839453/download-image-using-html2canvas
• https://velog.io/@sumi-0011/html2canvas