Repolode
Enviar
zumerlab

zumerlab/snapdom

Motor JavaScript para navegador que captura elementos del DOM y los exporta como SVG, PNG, JPG, WebP, canvas o Blob, con plugins para HTML, PDF, vectores, GIF y video.

Alternativa open source a:html2canvas

Ver en GitHubSitio web
Estrellas
8,197
Forks
307
Issues abiertos
5
Último commit
hace 15 horas

¿Qué es?

SnapDOM captura un elemento del DOM de la página y lo convierte en imágenes como SVG, PNG, JPG, WebP, canvas o Blob. Una captura puede reutilizarse para obtener varios formatos, y el resultado conserva el estado capturado aunque el elemento de origen cambie después.

Los plugins oficiales amplían la misma captura para generar HTML autocontenido, PDF paginado y con texto que se puede buscar, vectores SVG editables con datos para el portapapeles de Figma, contexto en texto o JSON para agentes, GIF animado y video codificado en el navegador. Se pueden crear exportadores personalizados usando los hooks documentados para plugins. El núcleo no tiene dependencias y funciona íntegramente en el navegador; necesita un entorno DOM y no funciona en Node.js sin configuración adicional.

La biblioteca incluye opciones para el tamaño de salida, DPR, color de fondo, excluir u ocultar elementos, incrustar fuentes web y recortar. Las exportaciones de archivos PNG admiten capturas que superan los límites de tamaño del canvas, y una opción de recorte independiente permite rasterizar páginas grandes por partes.

Funciones clave

  • 01Captura elementos del DOM como SVG, PNG, JPG, WebP, canvas o Blob en una sola captura.
  • 02Reutiliza capturas sin cambios y reconstruye solo los subárboles afectados por cambios pequeños.
  • 03Los plugins oficiales exportan HTML, PDF, vectores editables, GIF y video.
  • 04Los hooks para plugins permiten crear exportadores personalizados.
  • 05Las opciones controlan el tamaño, la escala, el fondo, los elementos excluidos y la incrustación de fuentes.
  • 06Funciona en el navegador mediante un módulo ES, una etiqueta script o declaraciones de TypeScript.

Casos de uso

  • Compartir desde una aplicación web un dashboard, gráfico o factura como imagen.
  • Generar informes PDF o páginas listas para imprimir a partir del contenido renderizado de una página.
  • Exportar ilustraciones vectoriales editables o pegar diseños en Figma.
  • Proporcionar a agentes de IA una vista textual o en imagen del contenido de la página.

Inicio rápido

  1. 1

    Instala el paquete principal con npm

    npm i @zumer/snapdom
  2. 2

    Importa snapdom y exporta un elemento a PNG

Antes de usarlo

  • SnapDOM necesita el DOM de un navegador, por lo que Node.js en el servidor requiere un entorno de navegador.
  • Las imágenes, fuentes y hojas de estilo de otros orígenes necesitan recursos legibles o un proxy; los iframes de otros orígenes se muestran como marcadores de posición.
  • La salida SVG depende de foreignObject, por lo que la compatibilidad varía fuera de los navegadores.

Temas

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

Preguntas frecuentes

¿Qué es snapdom?
Motor JavaScript para navegador que captura elementos del DOM y los exporta como SVG, PNG, JPG, WebP, canvas o Blob, con plugins para HTML, PDF, vectores, GIF y video. SnapDOM captura un elemento del DOM de la página y lo convierte en imágenes como SVG, PNG, JPG, WebP, canvas o Blob. Una captura puede reutilizarse para obtener varios formatos, y el resultado conserva el estado capturado aunque el elemento de origen cambie después.
¿snapdom es gratuito? ¿Qué licencia tiene?
snapdom es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿snapdom sigue mantenido?
Mantenimiento activo. El último commit de snapdom fue el 20 oct 2026.
¿Para qué puedo usar snapdom?
Compartir desde una aplicación web un dashboard, gráfico o factura como imagen. Generar informes PDF o páginas listas para imprimir a partir del contenido renderizado de una página. Exportar ilustraciones vectoriales editables o pegar diseños en Figma. Proporcionar a agentes de IA una vista textual o en imagen del contenido de la página.
¿Cómo se instala snapdom?
Instala el paquete principal con npm: npm i @zumer/snapdom Importa snapdom y exporta un elemento a PNG
¿Dónde consigo snapdom?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/zumerlab/snapdom

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados