html2canvas - 반응형 상관없이 캡처하기

html2canvas 이란?

 

특정 HTML 요소를 캡처후, 이미지로 변환하는 자바스크립트의 라이브러리이다.

 

 

 

언제 사용하면 좋냐면

 

예시를 먼저 보자.

 

 

블로그 주인장이 새로 도입한 기능인데,

 

 

저 이미지를 유저가 일일이 캡처할 필요 없이

버튼 하나로 이미지로 저장할 수 있다.

이런 경우 사용하면 좋을듯하다.

 

 

하지만 이 라이브러리를 사용하면서 문제가 생겼었는데,

 

윈도우의 크기,

 

쉽게 말하자면 pc와 mobile일 때의 윈도우의 크기가 다르기 때문에

 

윈도우 크기에 맞게 변해버린 HTML요소에 따라서 캡처가 되어버린다는 것이다.

 

 

 

해결 방법

 

제일 먼저 공식 웹사이트를 방문해서 사양을 보는 것이다.

 

참조

https://html2canvas.hertzen.com/configuration

Options

 

 

사양에 windowWidth와 windowHeight가 있다.

 

이걸 적용시켜서 기기의 윈도우 상관 없이

내가 원하는 윈도우를 지정해서 캡처할 수 있게 만들 수 있다!

 

바로 적용해보자

 

 

 

 

 

 

잘 다운로드가 되었다.

 

 

 

 

 

 

---

 

 

 

또 하나.

 

 

사양에 적용 안되는 css 속성들이 있으니

라이브러리를 사용할 때 

공식 웹페이지의 사양을 꼭 확인하자.