자바스크립트 웹 화면 캡쳐를 해보자

 

html2canvas를 사용하여 웹 화면 캡쳐를 해보자

 

html2canvas는 자바스크립트로 화면을 캡쳐할 수 있는 라이브러리다. element를 캔버스로 변환해준다.

화면을 PDF로 내보낼때도 사용되는데, PDF로 내보내기는 '자바스크립트로 PDF 내보내기'를 참고바란다. 그리고 html2canvas가 어떻게 화면을 캡처하는지 궁금하다면 'html2canvas는 어떻게 캔버스를 그릴까' 포스트를 참고바란다.

 

화면을 캡쳐하고, 클립보드에 복사도 해보자.

사용법은 굉장히 간단하다.

 

설치 (직접 js 다운받아서 사용해도 됨)

Install NPM
npm install --save html2canvas

Install Yarn
yarn add html2canvas

 

라이브러리 임포트

import html2canvas from 'html2canvas';

 

캡쳐할 대상 엘리먼트만 넣어주면 된다.
아래처럼하면 화면 아래 캡쳐본이 붙어서 보일것임

html2canvas(document.body).then(canvas => {
    document.body.appendChild(canvas);
});

 

이미지를 다운로드하는 방법. 캔버스를 url로 변환 후 다운로드 하면 된다.

html2canvas(document.body).then(canvas => {
    const link = document.createElement('a')
    link.download = 'filename'
    link.href = canvas.toDataURL()
    document.body.appendChild(link)
    link.click()
});

 

이미지를 클립보드에 복사하는 방법

html2canvas(document.body).then(canvas => {
    canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]))
});

 

Vue에서 ref를 사용하려면 엘리먼트 부분에 ref를 넘기면 된다.
컴포넌트일 경우, $el로 넘기면 된다.

html2canvas(this.$refs.test).then(canvas => {
    canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]))
});

html2canvas(this.$refs.test.$el).then(canvas => {
    canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]))
});