HTML 화면 스크린샷 찍기 (html2canvas)

사용자의 브라우저에 보이는 HTML을 스크린샷 찍을 수 있는 방법을 기록하기로 하였다.

html2canvas 라는 라이브러리를 사용하여 이를 간단히 구현할 수 있다.

 

npm install html2canvas

 

함수를 작성하여 기능을 구현해보자면 다음과 같이 작성할 수 있다.

 

import html2canvas from 'html2canvas'

...

const copyElement = () => {
    const root = document.querySelector('#copy-image-div') as HTMLElement
    if (root) {
      html2canvas(root, { allowTaint: true }).then((canvas) => {
        document.querySelector('#copy-root')?.appendChild(canvas)
      })
    }
  }

 

document.querySelector로 이미지 태그를 자식 노드로 가지는 div를 가져와 이를 copy-root라는 id를 가지는 div의 하위에 추가하는 함수이다.

다만, 아무런 옵션 없이 사용했을 때 이 라이브러리는 이미지를 노출시키지 않는데, 기본 옵션으로 cross-origin를 허용하지 않기 때문이다.

cross-origin 이미지를 사용한다면, 두 번째 인자로 옵션을 주어 allowTaint를 true로 설정해준다.

복사하기 위해서 선택한 요소가 canvas로 변환되어 이를 사용할 수 있게 해주는 라이브러리인 html2canvas였다.

 

 

 

공식 문서

https://html2canvas.hertzen.com/

html2canvas - Screenshots with JavaScript