
[JS] dom-to-image.js 사용 방법 및 사용한 이유에 대한 정리 ( vs html2canvas ) : html to image
FrontEnd/JavaScript
2024. 2. 1. 19:05
dom-to-image.js 라이브러리란? 웹페이지의 DOM요소를 이미지로 변환하도록 도와주는 라이브러리 dom-to-image.js를 사용하게 된 계기 이전에도 DOM을 이미지로 변환하여, PDF 형태로 추출한 적이 있다. 그때는 html2canvas + jsPdf 라이브러리 조합으로 기능을 구현했었는데... 링크 참조 이번에 똑같은 기능을 구현 할 일이 있어서 그냥 되겠지.. 라고 생각해서 구현을 했는데 왠 걸? 스타일이 깨지는 상황이 발생했다.. 그래서 왜 그런건지 좀 알아보았는데, 대충 내가 생각하는 원인은 아래와 같았다. 1. html2canvas가 지원하는 css 속성이 제한적이다. html2canvas 라이브러리의 스타일 적용과 관련하여 검색을 조금 하면 다른 사람들도 조금 문제가 있다는 듯..