Repolode
Enviar
zumerlab

zumerlab/snapdom

Engine JavaScript executada no navegador que captura elementos do DOM e exporta como SVG, PNG, JPG, WebP, canvas ou Blob, com plugins para HTML, PDF, vetores, GIF e vídeo.

Alternativa open source a:html2canvas

Ver no GitHubSite
Estrelas
8,197
Forks
307
Issues abertas
5
Último commit
há 10 horas

O que é?

O SnapDOM captura um elemento do DOM na página e o converte em formatos de imagem como SVG, PNG, JPG, WebP, canvas ou Blob. Uma captura pode ser reutilizada em várias saídas, e o resultado mantém o estado capturado mesmo que o elemento de origem seja alterado depois.

Os plugins oficiais estendem a mesma captura para gerar HTML autocontido, PDF paginado e pesquisável, vetores SVG editáveis com conteúdo para a área de transferência do Figma, contexto em texto ou JSON para agentes, GIF animado e vídeo codificado pelo navegador. É possível criar exporters personalizados usando os hooks documentados dos plugins. O core não tem dependências e roda inteiramente no navegador; precisa de um ambiente DOM e não funciona em Node.js puro.

A biblioteca inclui opções de tamanho de saída, DPR, cor de fundo, exclusão ou ocultação de elementos, incorporação de web fonts e recorte. As exportações de arquivos PNG aceitam capturas que ultrapassam os limites de tamanho do canvas, e uma opção de recorte separada permite rasterizar páginas grandes em partes.

Recursos principais

  • 01Captura elementos do DOM e os exporta como SVG, PNG, JPG, WebP, canvas ou Blob a partir de uma única captura.
  • 02Reutiliza capturas inalteradas e reconstrói apenas as subárvores afetadas por pequenas alterações.
  • 03Os plugins oficiais exportam HTML, PDF, vetores editáveis, GIF e vídeo.
  • 04Os hooks dos plugins permitem que desenvolvedores criem exporters personalizados.
  • 05As opções controlam tamanho, escala, fundo, elementos excluídos e incorporação de fontes.
  • 06Funciona no navegador com um módulo ES, uma tag script ou declarações TypeScript.

Casos de uso

  • Compartilhar um dashboard, gráfico ou fatura como imagem a partir de uma aplicação web.
  • Gerar relatórios em PDF ou páginas prontas para impressão a partir do conteúdo renderizado da página.
  • Exportar arte vetorial editável ou colar designs no Figma.
  • Fornecer a agentes de IA uma visualização em texto ou imagem do conteúdo da página.

Início rápido

  1. 1

    Instale o pacote principal com npm

    npm i @zumer/snapdom
  2. 2

    Importe snapdom e exporte um elemento para PNG

Antes de usar

  • O SnapDOM precisa do DOM de um navegador; por isso, o Node.js no servidor requer um ambiente de navegador.
  • Imagens, fontes e folhas de estilo de outras origens precisam de recursos legíveis ou de um proxy; iframes de outras origens são exibidos como espaços reservados.
  • A saída SVG depende de foreignObject, então o suporte varia fora dos navegadores.

Tópicos

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

Perguntas frequentes

O que é snapdom?
Engine JavaScript executada no navegador que captura elementos do DOM e exporta como SVG, PNG, JPG, WebP, canvas ou Blob, com plugins para HTML, PDF, vetores, GIF e vídeo. O SnapDOM captura um elemento do DOM na página e o converte em formatos de imagem como SVG, PNG, JPG, WebP, canvas ou Blob. Uma captura pode ser reutilizada em várias saídas, e o resultado mantém o estado capturado mesmo que o elemento de origem seja alterado depois.
snapdom é gratuito? Qual é a licença?
snapdom é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
snapdom ainda é mantido?
Manutenção ativa. O último commit de snapdom foi em 20 de out. de 2026.
Para que posso usar snapdom?
Compartilhar um dashboard, gráfico ou fatura como imagem a partir de uma aplicação web. Gerar relatórios em PDF ou páginas prontas para impressão a partir do conteúdo renderizado da página. Exportar arte vetorial editável ou colar designs no Figma. Fornecer a agentes de IA uma visualização em texto ou imagem do conteúdo da página.
Como instalar snapdom?
Instale o pacote principal com npm: npm i @zumer/snapdom Importe snapdom e exporte um elemento para PNG
Onde consigo snapdom?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/zumerlab/snapdom

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados