[Javascript][라이브러리 소개] html2canvas - Screen Capture

# html2canvas를 활용한 스크린 캡쳐

- 본 포스팅에서는 html2canvas를 활용하여 원하는 HTML 요소들을 이미지로 만드는 방법을 소개합니다

 

 

# 라이브러리 사이트

html2canvas - Screenshots with JavaScript

 

728x90

# 사용방법

- html2canvas를 설치해 줍니다

yarn add html2canvas

 

- OnClick 등의 원하는 이벤트에서 다음과 같이 지정된 id의 요소를(아래의 경우 "save_element_id") 캡쳐합니다

html2canvas(document.getElementById("save_element_id");).then(canvas => {
    document.body.appendChild(canvas)
    // 이미지 처리
    const dataURL = canvas.toDataURL("image/png");
    // ...
});

 

# 기타

- 캡처된 영역이 제대로 표시되지 않는 등의 문제가 발생할 경우, 이 링크를 참고 해 주세요

- 만약 React에서 동일한 기능을 구현하고 싶은 경우, 아래의 라이브러리를 사용하는 것도 좋은 방법일 것 같습니다

 

GitHub - vre2h/use-react-screenshot

 

 

---