Guide indépendant de transformation du DOM

Remplacez html2canvas.
Utilisez SnapDOM.

SnapDOM capture une seule fois un sous-arbre du DOM et renvoie un résultat réutilisable. Exportez-le en PNG, JPG, WebP, SVG, Canvas ou Blob, ou ajoutez un format personnalisé avec un plugin.

Voir les différences →Lire le code source ↗
↓ Comparatif et guide de migration
DOM → ANYTHING
Mr. SnapDOM, the official SnapDOM mascot
OFFICIAL MASCOT

Découvrez Mr. SnapDOM

Mascotte officielle et gardien de captures DOM plus rapides et plus fidèles.

01 / RETHINK

Pourquoi remplacer html2canvas ?

html2canvas interprète la page et redessine le CSS pris en charge dans un canvas. SnapDOM produit une représentation DOM autonome pouvant être exportée plusieurs fois.

MODÈLE HTML2CANVASlegacy toolsMODÈLE SNAPDOMSnapDOM
PrincipeRedessiner des pixels dans un canvasReprésentation DOM autonome
Résultat réutilisableNouvelle capture pour chaque sortieUn clone, plusieurs exports
Fidélité webLa prise en charge CSS varieStyles, polices, pseudo-éléments et Shadow DOM
FormatsPrincipalement raster ou SVGPNG, JPG, WebP, SVG, Canvas, Blob et formats personnalisés
ArchitecturePipeline de capture fixeModulaire, extensible et compatible avec les plugins
02 / BENCHMARK

Mesurés sur le même DOM

Accélération de la version actuelle de SnapDOM face à chaque concurrent dans Chromium. Plus la valeur est élevée, mieux c’est. Résultats du benchmark Vitest public du projet.

Nœud simple

Scénariovs 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×

Nœud complexe

Scénariovs 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×
DÉCOUPE VIEWPORT24.6×

plus rapide que le toCanvas pleine page sur une page longue

GALERIE D’IMAGES1.97×

plus rapide que html2canvas pour un PNG rasterisé à l’échelle 2

COMPRESSION1.17×

plus rapide sur une galerie d’images d’arrière-plan

Reproduire le benchmark
TERMINAL
git clone https://github.com/zumerlab/snapdom.git
cd snapdom
npm install
npm run test:benchmark
Voir le code du benchmark ↗
03 / MIGRATE

Migrez en trois minutes

Conservez votre interface et changez de moteur de capture.

01

Installez

Ajoutez le paquet @zumer/snapdom ou utilisez le CDN.

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

Remplacez l’appel

Passez le même élément à snapdom.toPng().

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

Réutilisez le DOM

Capturez une fois puis exportez plusieurs fois sans nouveau clonage.

PNGJPGWEBPSVGBLOB
03 / LANDSCAPE

Comparez les alternatives

Ces bibliothèques répondent à des besoins proches, mais diffèrent par leur architecture, leur maintenance et leur modèle d’extension.

01

html2canvas

Moteur de rendu Canvas

Populaire et familier, mais il interprète la page et redessine dans Canvas les propriétés CSS prises en charge.

02

html-to-image

Fork maintenu

Un fork plus maintenable de dom-to-image avec des méthodes d’export pratiques, fondé sur la même approche SVG foreignObject.

03

dom-to-image

L’original influent

Le projet qui a inspiré de nombreux successeurs. Simple et important, même si son architecture accuse son âge.

04

dom-to-image-more

Successeur corrigé

Ajoute des correctifs utiles et la prise en charge des iframes tout en conservant l’architecture et l’API d’origine.

Pour les nouveaux projets de capture DOM côté client, SnapDOM offre davantage de possibilités qu’une API fixe d’export d’images.

04 / EXTEND

Les plugins font partie de l’architecture

Ils peuvent intervenir pendant la capture, transformer le résultat et enregistrer de nouveaux formats d’export.

01 / CAPTURE

Contrôlez l’entrée

Filtrez les nœuds, remplacez le contenu et préparez le DOM avant l’export.

＋
02 / TRANSFORME

Modifiez le résultat

Combinez filtres, calques et post-traitement sans modifier le cœur.

＋
03 / EXPORT

Créez un format

Allez au-delà des images avec des exports ASCII, PDF ou orientés prompts.

＋
04 / INTÉGRATION

Construisez votre flux

Enregistrez les plugins globalement ou par capture et combinez-les librement.

＋
Explorer le système officiel de plugins ↗
05 / RECIPES

Recettes courantes

Les quelques modèles utiles dans la plupart des produits.

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

Capturez le DOM résolu par le navigateur

Au moment de la capture, la mise en page, les polices et les styles sont déjà résolus. SnapDOM conserve cet état dans une représentation portable au lieu d’implémenter un second moteur CSS.

01✓Pseudo-éléments
02✓Polices web
03✓Transformations CSS
04✓Shadow DOM
05✓Images d’arrière-plan
06✓Contenu SVG
06 / FAQ

Questions avant de migrer

01SnapDOM est-il seulement une bibliothèque de captures ?+

Non. C’est un moteur de capture DOM : snapdom() crée une représentation réutilisable qui peut être transformée et exportée plusieurs fois.

02Puis-je créer un format personnalisé ?+

Oui. Le système de plugins permet d’ajouter des exportateurs et d’intervenir dans le pipeline de capture.

03Puis-je toujours obtenir un Canvas ?+

Oui. Utilisez snapdom.toCanvas(element), ou choisissez PNG, JPG, WebP, SVG et Blob.

04Et les images provenant d’autres domaines ?+

Les règles de sécurité du navigateur s’appliquent toujours. SnapDOM propose useProxy pour les ressources bloquées par CORS.

READY TO MIGRATE

Migrez d’abord une capture.

Comparez le résultat dans les navigateurs pris en charge, puis supprimez l’ancienne dépendance.