이미지 변환 방식
- html2canvas:
html2canvas는 HTML 요소를 캡처하여 Canvas로 변환하는 라이브러리로, CSS 스타일, 배경 이미지, SVG 등을 지원합니다. 그러나 폰트, 비디오, 애니메이션 등 일부 요소는 제대로 캡처하지 못할 수 있습니다. - html-to-image:
html-to-image는 HTML 요소를 이미지로 변환하는 라이브러리로, SVG, CSS 스타일, 배경 이미지 등을 지원합니다. 이 라이브러리는 요소의 스타일과 구조를 유지하면서 이미지를 생성합니다. - dom-to-image:
dom-to-image는 DOM 요소를 이미지로 변환하는 라이브러리로, SVG, CSS 스타일, 배경 이미지 등을 지원합니다. 이 라이브러리는 요소의 스타일과 구조를 유지하면서 이미지를 생성합니다.
비동기 처리
- html2canvas:
html2canvas는 비동기적으로 캡처를 수행하며,Promise를 반환하여 캡처 완료 후 Canvas 객체를 사용할 수 있습니다. - html-to-image:
html-to-image는 비동기적으로 이미지를 생성하며,Promise를 반환하여 이미지 생성 완료 후 결과를 처리할 수 있습니다. - dom-to-image:
dom-to-image는 비동기적으로 이미지를 생성하며,Promise를 반환하여 이미지 생성 완료 후 결과를 처리할 수 있습니다.
CSS 스타일 지원
- html2canvas:
html2canvas는 인라인 스타일, 외부 스타일 시트, 배경 이미지, 투명도 등 다양한 CSS 스타일을 지원하지만, 일부 복잡한 스타일(예: 그라디언트, 필터 등)은 정확하게 캡처하지 못할 수 있습니다. - html-to-image:
html-to-image는 인라인 스타일, 외부 스타일 시트, 배경 이미지, 투명도 등 다양한 CSS 스타일을 지원합니다. - dom-to-image:
dom-to-image는 인라인 스타일, 외부 스타일 시트, 배경 이미지, 투명도 등 다양한 CSS 스타일을 지원합니다.
SVG 지원
- html2canvas:
html2canvas는 SVG 요소를 지원하지만, SVG의 스타일과 구조를 완벽하게 캡처하지는 못할 수 있습니다. - html-to-image:
html-to-image는 SVG 요소를 지원하며, SVG의 스타일과 구조를 유지하면서 이미지를 생성할 수 있습니다. - dom-to-image:
dom-to-image는 SVG 요소를 지원하며, SVG의 스타일과 구조를 유지하면서 이미지를 생성할 수 있습니다.
예제 코드
- html2canvas:
html2canvas예제import html2canvas from 'html2canvas'; const element = document.getElementById('my-element'); html2canvas(element) .then((canvas) => { document.body.appendChild(canvas); const img = canvas.toDataURL(); console.log(img); }) .catch((error) => { console.error('Error capturing element:', error); }); - html-to-image:
html-to-image예제import { toPng } from 'html-to-image'; const node = document.getElementById('my-node'); toPng(node) .then((dataUrl) => { const img = new Image(); img.src = dataUrl; document.body.appendChild(img); }) .catch((error) => { console.error('Error generating image:', error); }); - dom-to-image:
dom-to-image예제import { toPng } from 'dom-to-image'; const node = document.getElementById('my-node'); toPng(node) .then((dataUrl) => { const img = new Image(); img.src = dataUrl; document.body.appendChild(img); }) .catch((error) => { console.error('Error generating image:', error); });