Guía independiente de transformación del DOM

Reemplaza html2canvas.
Usa SnapDOM.

SnapDOM captura una vez un subárbol del DOM y devuelve un resultado reutilizable. Expórtalo como PNG, JPG, WebP, SVG, Canvas o Blob, o añade formatos propios mediante plugins.

Ver las diferencias →Leer el código fuente ↗
↓ Comparación y guía de migración
DOM → ANYTHING
Mr. SnapDOM, the official SnapDOM mascot
OFFICIAL MASCOT

Conoce a Mr. SnapDOM

Mascota oficial y guardián de capturas del DOM más rápidas y precisas.

01 / RETHINK

¿Por qué reemplazar html2canvas?

html2canvas interpreta la página y redibuja el CSS compatible en un canvas. SnapDOM produce una representación autocontenida del DOM que puede exportarse varias veces.

MODELO HTML2CANVASlegacy toolsMODELO SNAPDOMSnapDOM
Idea centralRedibujar píxeles en un canvasRepresentación autocontenida del DOM
Resultado reutilizableNueva captura para cada salidaUn clon, muchas exportaciones
Fidelidad webEl soporte CSS varíaEstilos, fuentes, pseudoelementos y Shadow DOM
FormatosPrincipalmente ráster o SVGPNG, JPG, WebP, SVG, Canvas, Blob y formatos propios
ArquitecturaFlujo de captura fijoModular, extensible y compatible con plugins
02 / BENCHMARK

Medidos sobre el mismo DOM

Aceleración de la versión actual de SnapDOM frente a cada competidor en Chromium. Un valor mayor es mejor. Resultados del benchmark público de Vitest del proyecto.

Nodo simple

Escenariovs html2canvasvs html-to-imagevs modern-screenshot
Small · 200×100443.97×4.76×13.27×
Modal · 400×300474.08×4.89×23.09×
Page view · 1200×800546.28×4.94×92.60×
Large scroll · 2000×1500661.06×4.95×209.84×
Very large · 4000×20001102.78×4.97×621.62×

Nodo complejo

Escenariovs html2canvasvs html-to-imagevs modern-screenshot
Small · 200×100219.07×7.17×19.28×
Modal · 400×300100.18×12.42×14.50×
Page view · 1200×80020.66×15.67×11.42×
Large scroll · 2000×150010.61×16.14×10.99×
Very large · 4000×20007.35×15.88×10.66×
RECORTE DE VIEWPORT24.6×

más rápido que toCanvas de página completa en una página larga

GALERÍA DE IMÁGENES1.97×

más rápido que html2canvas en PNG rasterizado a escala 2

COMPRESIÓN1.17×

más rápido en una galería de imágenes de fondo

Reproducir el benchmark
TERMINAL
git clone https://github.com/zumerlab/snapdom.git
cd snapdom
npm install
npm run test:benchmark
Ver código del benchmark ↗
03 / MIGRATE

Migra en tres minutos

Conserva tu interfaz y actualiza el motor de captura.

01

Instala

Añade el paquete @zumer/snapdom o utiliza el CDN.

NPM / BUNDLER
TERMINAL
npm install @zumer/snapdom
CDN / SIN COMPILACIÓN
HTML
<script type="module">
  import { snapdom } from
    "https://unpkg.com/@zumer/snapdom/dist/snapdom.mjs";
</script>
02

Cambia la llamada

Pasa el mismo elemento a snapdom.toPng().

- const canvas = await html2canvas(node)+ const image = await snapdom.toPng(node)
03

Reutiliza el DOM

Captura una vez y exporta varias veces sin volver a clonar.

PNGJPGWEBPSVGBLOB
03 / LANDSCAPE

Compara las alternativas

Estas bibliotecas resuelven tareas parecidas, pero no comparten arquitectura, historial de mantenimiento ni modelo de extensión.

01

html2canvas

Renderizador de Canvas

Popular y conocido, pero interpreta la página y redibuja en Canvas las propiedades CSS que admite.

02

html-to-image

Fork mantenido

Un fork más mantenible de dom-to-image con métodos de salida útiles, basado en el mismo enfoque SVG foreignObject.

03

dom-to-image

El original influyente

El proyecto que inspiró a muchos sucesores. Simple e importante, aunque su arquitectura ya muestra su antigüedad.

04

dom-to-image-more

Sucesor corregido

Añade correcciones valiosas y soporte para iframes, manteniendo la arquitectura y API originales.

Para nuevos proyectos de captura del DOM en el cliente, SnapDOM ofrece una ruta de extensión más amplia que una API fija de exportación de imágenes.

04 / EXTEND

Los plugins son parte de la arquitectura

Los plugins pueden intervenir en la captura, transformar el resultado y registrar nuevos formatos de exportación.

01 / CAPTURA

Controla la entrada

Filtra nodos, reemplaza contenido y prepara el DOM antes de exportar.

＋
02 / TRANSFORMA

Modifica el resultado

Combina filtros, capas y posprocesamiento sin modificar el núcleo.

＋
03 / EXPORTA

Crea un formato

Ve más allá de las imágenes con exportaciones como ASCII, PDF o formatos para prompts.

＋
04 / INTEGRA

Construye tu flujo

Registra plugins globalmente o por captura y combínalos libremente.

＋
Explorar el sistema oficial de plugins ↗
05 / RECIPES

Recetas habituales

Los patrones que utilizarás en la mayoría de productos.

JAVASCRIPT
import { snapdom } from 'snapdom'

const card = document.querySelector('#card')
const image = await snapdom.toPng(card)
await image.download({ filename: 'card.png' })
WHY IT WORKS

Captura el DOM resuelto por el navegador

Al capturar, el diseño, las fuentes y los estilos ya están resueltos. SnapDOM conserva ese estado en una representación portátil en lugar de implementar un segundo motor CSS.

01✓Pseudoelementos
02✓Fuentes web
03✓Transformaciones CSS
04✓Shadow DOM
05✓Imágenes de fondo
06✓Contenido SVG
06 / FAQ

Preguntas antes de migrar

01¿SnapDOM es solo una biblioteca de capturas?+

No. Es un motor de captura del DOM: snapdom() crea una representación reutilizable que puede transformarse y exportarse varias veces.

02¿Puedo crear un formato propio?+

Sí. El sistema de plugins permite añadir exportadores e intervenir en el flujo de captura.

03¿Puedo obtener un Canvas?+

Sí. Usa snapdom.toCanvas(element) o elige PNG, JPG, WebP, SVG y Blob.

04¿Qué ocurre con las imágenes de otros dominios?+

La seguridad del navegador sigue vigente. SnapDOM ofrece useProxy para recursos rechazados por CORS.

READY TO MIGRATE

Migra primero una captura.

Compara el resultado en tus navegadores compatibles y luego elimina la dependencia anterior.