css 강의 하나를 듣다가, 화면을 캡처해서 저장하는 것을 원해서
서버 없이도 가능한지 구글링 해보다가 html2canvas를 알게 되어서 정리해보려고 한다.

설치

npm install --save html2canvas

사용하기

라이브러리 임포트

import html2canvas from "html2canvas";

사용방법

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

html2canvas는 리턴되는 것이 promise 형태이기 때문에
then을 사용하여 성공하면~ 어떻게 하겠다는 행동을 이어 쓸 수 있다.

npm 사이트에서 사용하라고 알려준 예시는 위에 적어보았고,
이걸 다운로드 하거나, 클립보드에 저장하는 방법을 해보쟈

클립보드에 복사하기 🗂

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

이미지 다운로드 📀

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

canvas에 사용된 toDataURL()을 사용하면 문자열이 반환되는데,
이 문자열은 canvas에 그려진 내용을 Data URL로 변환한 것이다.
그러니 그 자체로 이미지 정보가 됨.
그걸 이미지 파일로 리턴하는 작업이다.

버튼 눌러 특정 영역 다운

    const onCapture = () => {
      html2canvas(document.querySelector(".App")).then((canvas) => {
        const link = document.createElement("a");
        link.download = "image";
        link.href = canvas.toDataURL();
        document.body.appendChild(link);
        link.click();
      });

querySelector를 이용했다.
그리고 이제 버튼 하나를 만들어주면 끝!

<button onClick={onCapture}>캡처</button>

실습으로 새 파일을 만들긴 귀찮으니... 예전에 defaultProps 실습했던 자료에 버튼만 추가해서 해봤다 ㅎ_ㅎ 아주 잘 저장되는 모습~