SVG-Unterstützung
- html2canvas:
html2canvaskann SVGs rendern, behandelt sie jedoch als Rasterbilder, wenn sie im DOM dargestellt werden. Dies kann zu einem Verlust der Vektorgrafikqualität führen, insbesondere bei Skalierung oder Zoom. - html-to-image:
html-to-imagehat eine verbesserte SVG-Unterstützung im Vergleich zu vielen anderen Bibliotheken. Es rendert SVGs genau und behandelt sie besser, was es zu einer zuverlässigen Wahl für Projekte macht, die SVG-Grafiken integrieren. - dom-to-image:
dom-to-imagebietet eine gute Unterstützung für SVGs, einschließlich der Möglichkeit, SVG-Grafiken innerhalb von DOM-Elementen zu rendern und in Bilder umzuwandeln. Es kann jedoch einige Einschränkungen bei der Handhabung von komplexen SVGs oder externen SVG-Dateien geben.
Hintergrundfarbe anpassen
- html2canvas:
html2canvasrendert den Hintergrund des DOM-Elements mit seiner ursprünglichen Farbe. Es gibt jedoch keine integrierte Funktion zur Anpassung der Hintergrundfarbe während des Renderings. - html-to-image:
html-to-imageunterstützt die Anpassung der Hintergrundfarbe, bietet jedoch eine einfachere Implementierung ohne umfangreiche Konfiguration. Es ist benutzerfreundlich und ermöglicht schnelle Anpassungen. - dom-to-image:
dom-to-imageermöglicht die Anpassung der Hintergrundfarbe des gerenderten Bildes, was besonders nützlich ist, wenn das DOM-Element einen transparenten Hintergrund hat und Sie eine bestimmte Farbe festlegen möchten.
Bildformat und -qualität
- html2canvas:
html2canvaserstellt Bilder im PNG-Format. Es bietet keine Optionen zur Anpassung der Bildqualität oder zum Wechseln zwischen verschiedenen Formaten, was es weniger flexibel macht. - html-to-image:
html-to-imageunterstützt ebenfalls PNG- und JPEG-Ausgaben, bietet jedoch weniger Kontrolle über die Bildqualität. Es ist jedoch schnell und effizient bei der Erstellung von Bildern mit akzeptabler Qualität. - dom-to-image:
dom-to-imageunterstützt die Ausgabe von Bildern in verschiedenen Formaten, einschließlich PNG und JPEG. Sie können die Bildqualität für JPEGs anpassen, was Ihnen mehr Kontrolle über die Dateigröße und die visuelle Qualität gibt.
Einfache Implementierung
- html2canvas:
html2canvasist relativ einfach zu implementieren, insbesondere wenn Sie Screenshots des sichtbaren Bereichs erstellen möchten. Es erfordert jedoch möglicherweise zusätzliche Anpassungen, um bestimmte Stile oder Elemente genau zu rendern. - html-to-image:
html-to-imagezeichnet sich durch seine einfache und intuitive API aus, die eine schnelle Implementierung ermöglicht. Es ist besonders benutzerfreundlich für Entwickler, die eine schnelle Lösung ohne viel Aufwand suchen. - dom-to-image:
dom-to-imageerfordert einige Konfigurationen, insbesondere wenn Sie erweiterte Funktionen wie SVG-Unterstützung oder benutzerdefinierte Hintergrundfarben nutzen möchten. Die API ist jedoch gut dokumentiert und leicht verständlich.
Codebeispiel
- html2canvas:
html2canvasBeispielimport html2canvas from 'html2canvas'; const element = document.getElementById('my-element'); html2canvas(element) .then((canvas) => { document.body.appendChild(canvas); }) .catch((error) => { console.error('Fehler beim Erstellen des Screenshots:', error); }); - html-to-image:
html-to-imageBeispielimport { toPng } from 'html-to-image'; const node = document.getElementById('my-node'); toPng(node) .then((dataUrl) => { const img = new Image(); img.src = dataUrl; document.body.appendChild(img); }) .catch((error) => { console.error('Fehler beim Konvertieren des DOM-Elements:', error); }); - dom-to-image:
dom-to-imageBeispielimport { toPng } from 'dom-to-image'; const node = document.getElementById('my-node'); toPng(node) .then((dataUrl) => { const img = new Image(); img.src = dataUrl; document.body.appendChild(img); }) .catch((error) => { console.error('Fehler beim Konvertieren des DOM-Elements:', error); });