[JavaScript] html2canvas 로 화면 캡처 후 저장하기 (React)

 

---

 

작성하고 있는 화면을 이미지로 저장하여 관리해야 하는 일이 생겨 구글링을 했는데  html2canvas 라이브러리를 이용하는 경우가 많아 사용해보았습니다.

 

npm 링크 :

 

https://www.npmjs.com/package/html2canvas

html2canvas

 

 

 

 

먼저 html2canvas를 설치합니다.

yarn add html2canvas

 

함수를 실행하였을 때, html2canvas로 특정 영역을 그릴 수 있습니다.

html2canvas 는 리턴되는것이 Promise 형태이기 때문에 then함수를 써서 성공했을 때의 행동을 이어서 진행할 수 있습니다.

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

 

npm 사이트에서는 위와 같은 예시로 사용이 되었고, 저는 이미지로 저장하여 다운로드를 해야 하는 상황이기 때문에, resolve의 함수를 변경했습니다.

testFunction = () =>{
      html2canvas(document.getElementById('test')).then(
      (canvas) => {
        this.onSaveAs(canvas.toDataURL('image/png'), 'test.png');
      }
    );
  }

 

onSaveAs는 제가 임의로 만들어 낸 함수이고, a 태그를 만들어 해당 태그에 uri 와 저장할 파일의 이름을 받게 해 두었습니다.

canvas에 사용된 toDataURL()을 사용하면 문자열이 반환되는데, 이 문자열은 Canvas에 그려진 내용을 Data URL로 변환한 것이기 때문에 그 자체로 이미지 정보가 됩니다. 따라서 이 문자열을 이미지 객체에 바인딩하거나 다른 이미지로 생성할 수 있게 됩니다.

 

아래의 문서에서 toDataUrl에 파라미터로 type을 적어두면 해당 확장자에 맞는 URL을 반환해 줄 것 입니다.

default는 'image/png'입니다.

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

HTMLCanvasElement.toDataURL() - Web APIs | MDN

 

onSaveAs함수는 다음과 같습니다.

  onSaveAs = (uri, filename) => {
      const link = document.createElement('a');
      document.body.appendChild(link);
      link.href = uri;
      link.download = filename;
      link.click();
      document.body.removeChild(link);
  };

a 태그를 만들고, body안에 자식으로 만들어 준 후, 해당 링크를 클릭하게 되어 다운로드를 받게 하고, 링크를 html안에서 사라지게 만들었습니다.

 

 

---

참고 :

https://imnotadevleoper.tistory.com/entry/React-%EC%82%AC%EC%A7%84-%EC%BA%A1%EC%B2%98-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%82%AC%EC%9A%A9%EC%9E%90%EA%B0%80-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EB%B0%9B%EA%B8%B0

[React] 사진, 캡처 이미지를 사용자가 다운로드 받기

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

HTMLCanvasElement.toDataURL() - Web APIs | MDN