snapdom은(는) 무엇인가요?

브라우저에서 DOM 요소를 캡처해 SVG, PNG, JPG, WebP, canvas 또는 Blob으로 내보내는 JavaScript 엔진으로, HTML, PDF, 벡터, GIF, 동영상 플러그인을 제공합니다. SnapDOM은 페이지의 DOM 요소를 캡처해 SVG, PNG, JPG, WebP, canvas 또는 Blob 같은 이미지 형식으로 변환합니다. 한 번 캡처한 결과를 여러 출력 형식으로 재사용할 수 있으며, 캡처 후 원본 요소가 바뀌어도 결과에는 캡처 당시의 상태가 유지됩니다.

snapdom은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

snapdom은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

snapdom은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. snapdom의 마지막 커밋은 2026년 10월 20일입니다.

snapdom은(는) 어디에 사용할 수 있나요?

웹 앱에서 대시보드, 차트 또는 청구서를 이미지로 공유합니다. 렌더링된 페이지 콘텐츠를 PDF 보고서나 인쇄용 페이지로 생성합니다. 편집 가능한 벡터 아트워크를 내보내거나 디자인을 Figma에 붙여넣습니다. AI 에이전트에 페이지 내용을 텍스트 또는 이미지로 제공합니다.

snapdom는 어떻게 설치하나요?

npm으로 코어 패키지를 설치합니다: npm i @zumer/snapdom snapdom을 가져와 요소를 PNG로 내보냅니다

snapdom은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/zumerlab/snapdom

zumerlab/snapdom

브라우저에서 DOM 요소를 캡처해 SVG, PNG, JPG, WebP, canvas 또는 Blob으로 내보내는 JavaScript 엔진으로, HTML, PDF, 벡터, GIF, 동영상 플러그인을 제공합니다.

대체할 수 있는 제품:html2canvas

GitHub에서 보기 웹사이트

스타: 8,197
포크: 307
열린 이슈: 5
마지막 커밋: 14시간 전

어떤 프로젝트인가요?

SnapDOM은 페이지의 DOM 요소를 캡처해 SVG, PNG, JPG, WebP, canvas 또는 Blob 같은 이미지 형식으로 변환합니다. 한 번 캡처한 결과를 여러 출력 형식으로 재사용할 수 있으며, 캡처 후 원본 요소가 바뀌어도 결과에는 캡처 당시의 상태가 유지됩니다.

공식 플러그인을 사용하면 캡처 결과를 자체 완결형 HTML, 검색 가능한 페이지 구분 PDF, Figma 클립보드 페이로드가 포함된 편집 가능한 SVG 벡터, 에이전트용 텍스트 또는 JSON 컨텍스트, 애니메이션 GIF, 브라우저에서 인코딩한 동영상으로 변환할 수 있습니다. 문서화된 플러그인 훅을 활용해 커스텀 내보내기 기능을 작성할 수도 있습니다. 코어에는 의존성이 없으며 브라우저에서만 실행됩니다. DOM 환경이 필요하므로 일반 Node.js에서는 실행되지 않습니다.

출력 크기, DPR, 배경색, 요소 제외 또는 숨기기, 웹 폰트 임베딩, 클리핑을 설정할 수 있습니다. PNG 파일로 내보낼 때는 캔버스 크기 제한을 초과하는 캡처도 처리하며, 별도의 crop 옵션을 사용하면 큰 페이지를 여러 조각으로 나눠 래스터화할 수 있습니다.

핵심 기능

01한 번의 캡처로 DOM 요소를 SVG, PNG, JPG, WebP, canvas 또는 Blob으로 내보냅니다.
02변경되지 않은 캡처는 재사용하고, 작은 변경이 발생하면 영향을 받은 하위 트리만 다시 구성합니다.
03공식 플러그인으로 HTML, PDF, 편집 가능한 벡터, GIF, 동영상을 내보냅니다.
04플러그인 훅을 사용해 커스텀 내보내기 기능을 만들 수 있습니다.
05크기, 배율, 배경, 제외할 요소, 폰트 임베딩을 옵션으로 설정할 수 있습니다.
06ES module, script 태그 또는 TypeScript 선언을 사용해 브라우저에서 실행할 수 있습니다.

활용 사례

웹 앱에서 대시보드, 차트 또는 청구서를 이미지로 공유합니다.
렌더링된 페이지 콘텐츠를 PDF 보고서나 인쇄용 페이지로 생성합니다.
편집 가능한 벡터 아트워크를 내보내거나 디자인을 Figma에 붙여넣습니다.
AI 에이전트에 페이지 내용을 텍스트 또는 이미지로 제공합니다.

빠른 시작

1
npm으로 코어 패키지를 설치합니다
npm i @zumer/snapdom
2
snapdom을 가져와 요소를 PNG로 내보냅니다

사용 전 알아둘 점

SnapDOM에는 브라우저 DOM이 필요하므로 서버 측 Node.js에서는 브라우저 환경이 필요합니다.
교차 출처 이미지, 폰트, 스타일시트에는 읽을 수 있는 리소스나 프록시가 필요하며, 교차 출처 iframe은 플레이스홀더로 표시됩니다.
SVG 출력은 foreignObject에 의존하므로 브라우저 외부에서는 지원 여부가 다를 수 있습니다.

토픽

#dom-to-image #screenshot #html-to-image #svg #pdf-export #canvas #browser #javascript #capture #dom

자주 묻는 질문

snapdom은(는) 무엇인가요?: 브라우저에서 DOM 요소를 캡처해 SVG, PNG, JPG, WebP, canvas 또는 Blob으로 내보내는 JavaScript 엔진으로, HTML, PDF, 벡터, GIF, 동영상 플러그인을 제공합니다. SnapDOM은 페이지의 DOM 요소를 캡처해 SVG, PNG, JPG, WebP, canvas 또는 Blob 같은 이미지 형식으로 변환합니다. 한 번 캡처한 결과를 여러 출력 형식으로 재사용할 수 있으며, 캡처 후 원본 요소가 바뀌어도 결과에는 캡처 당시의 상태가 유지됩니다.
snapdom은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?: snapdom은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
snapdom은(는) 아직 유지보수되고 있나요?: 활발히 유지보수 중. snapdom의 마지막 커밋은 2026년 10월 20일입니다.
snapdom은(는) 어디에 사용할 수 있나요?: 웹 앱에서 대시보드, 차트 또는 청구서를 이미지로 공유합니다. 렌더링된 페이지 콘텐츠를 PDF 보고서나 인쇄용 페이지로 생성합니다. 편집 가능한 벡터 아트워크를 내보내거나 디자인을 Figma에 붙여넣습니다. AI 에이전트에 페이지 내용을 텍스트 또는 이미지로 제공합니다.
snapdom는 어떻게 설치하나요?: npm으로 코어 패키지를 설치합니다: npm i @zumer/snapdom snapdom을 가져와 요소를 PNG로 내보냅니다
snapdom은(는) 어디서 받을 수 있나요?: 소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/zumerlab/snapdom

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.