Wenn Sie mit JavaScript einen Screenshot eines Teils oder der gesamten Webseite erstellen möchten, stecken Sie möglicherweise fest. Das Erstellen eines Bildes aus einem HTML-Element kann wie eine Herausforderung erscheinen, da es in JavaScript keine direkte Möglichkeit gibt.

Zum Glück ist dies keine unmögliche Aufgabe und mit den richtigen Werkzeugen sogar ganz einfach. Mit der html-to-image-Bibliothek ist das Erstellen von Bildern von DOM-Knoten so einfach wie ein einzelner Funktionsaufruf.

Wie funktioniert HTML-to-Image?

Das HTML-zu-Bild Die Bibliothek erzeugt ein Bild in Form einer Base64-Daten-URL. Es unterstützt mehrere Ausgabeformate, darunter PNG, JPG und SVG. Um diese Konvertierung durchzuführen, verwendet die Bibliothek diesen Algorithmus:

  1. Erstellen Sie einen Klon des Ziel-HTML-Elements, seiner untergeordneten Elemente und aller angehängten Pseudoelemente.
  2. Kopieren Sie das Styling für alle geklonten Elemente und betten Sie das Styling inline ein.
  3. Betten Sie die relevanten Webfonts ein, falls vorhanden.
    4. instagram viewer
  4. Betten Sie vorhandene Bilder ein.
  5. Konvertieren Sie den geklonten Knoten in XML und dann in SVG.
  6. Verwenden Sie das SVG, um eine Daten-URL zu erstellen.

Vorbehalte und Einschränkungen

Auch wenn html-to-image eine großartige Bibliothek ist, ist sie nicht perfekt. Es hat ein paar Vorbehalte, nämlich:

  • Die Bibliothek funktioniert nicht in Internet Explorer oder Safari.
  • Wenn der HTML-Code, den Sie konvertieren möchten, ein fehlerhaftes Canvas-Element enthält, schlägt die Bibliothek fehl. Wie MDN erklärt, wird das Einfügen von nicht von CORS genehmigten Daten in Ihr Canvas-Element es verderben.
  • Da Browser die maximale Größe einer Daten-URL beschränken, gibt es auch Beschränkungen für die Größe des HTML, das die Bibliothek konvertieren kann.

Nutzung der Bibliothek

Um die Bibliothek auszuprobieren, müssen Sie zunächst ein Projektverzeichnis auf Ihrem lokalen Rechner erstellen. Als nächstes installieren Sie html-to-image in diesem Verzeichnis mit der npm-Paketmanager. Hier ist der Terminalbefehl, um es zu installieren:

npm Installieren--save html-to-image

Sie sollten auch einen JavaScript-Bundler installieren, um die Verwendung der Bibliothek etwas einfacher zu machen. Das bauen Bundler kann helfen, Knotenmodule in webkompatible Skripte zu packen.

npm Installieren bauen

Das ist alles, was Sie installieren müssen. Erstellen Sie als Nächstes eine Datei mit dem Namen index.html in Ihrem Verzeichnis und stellen Sie es mit einem Webserver Ihrer Wahl bereit. Fügen Sie den folgenden Code in index.html ein:

<!doctype html>
<htmllang="en">
<Kopf>
<Metazeichensatz="UTF-8">
<metaname="Ansichtsfenster"
 Inhalt="width=Gerätebreite, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-kompatibel" Inhalt="dh = Rand">
<Titel>Dokumentieren</title>
<Stil>
 .buntes-div {
 Polsterung: 3rem;
 Farbe weiß;
 Hintergrundbild: linearer Farbverlauf (nach rechts, gelb, rebeccalila);
 Rand: 1px durchgehend schwarz;
 Rand: 1 Rem Auto;
 Schriftgröße: 3rem;
 Schriftfamilie: kursiv;
 }
</style>
</head>
<Karosserie>
<div-Klasse="bunt-div">
 ich'Ich werde in einem Screenshot sein!
</div>
<div-Klasse="Langtext">
 ich'm ein Beispiel für einen ausreichend ausführlichen Absatz, der
 veranschaulicht, dass das Aufnehmen von Screenshots in JavaScript ist
 wirklich sehr einfach, aus folgenden Gründen:
<Ul>
<li>Grund 1</li>
<li>Grund 2</li>
<li>Grund 2</li>
</ul>
</div>
<script src="aus.js"></script>
</body>
</html>

Dieser Code erstellt zwei Elemente auf der Seite: ein div mit einem Hintergrund mit Farbverlauf und etwas Text und eine ungeordnete Liste in einem anderen div. Als Nächstes schreiben Sie das JavaScript, um diese Elemente in Bilder umzuwandeln. Fügen Sie den folgenden Code in eine neue Datei namens script.js ein:

importieren * wie htmlToImage aus "html-to-image";
Konstante Elemente = ['.buntes-div', '.Langtext']


Elemente.für jeden((elem, ind) => {
konst Knoten = dokumentieren.querySelector (Element)
htmlToImage.toPng(Knoten)
 .dann(Funktion (DatenUrl) {
Lassen img = Neu Bild();
 img.src = dataUrl;
dokumentieren.Karosserie.appendChild(Bild);
 })
 .Fang(Funktion(Error){
 Konsole.Fehler ('Ups! Irgendwas lief schief!');
Konsole.log (Fehler)
 });
})

Dieser Code macht ein paar Dinge:

  • Importiert die HTML-zu-Bild-Bibliothek.
  • Erstellt ein Array aus CSS-Selektoren, die auf die beiden Elemente abzielen.
  • Erstellt ein PNG-Bild in Form einer Daten-URL aus jedem Element des Arrays.
  • Erstellt ein img-Tag und setzt sein src-Attribut auf die Daten-URL, wodurch Bildkopien der beiden Elemente erstellt werden.

Verwenden Sie nun esbuild, um die gebündelte Datei zu generieren (aus.js), auf die index.html verweist, indem Sie Folgendes in Ihrem Terminal ausführen:

 ./node_modules/.bin/esbuild script.js --bundle --outfile=out.js

An diesem Punkt sollte index.html in Ihrem Browser so aussehen:

Auch wenn die Kopien genauso aussehen wie die Originale, handelt es sich tatsächlich um Bildelemente. Sie können dies durch bestätigen Öffnen Sie Ihre Entwicklungstools und diese zu inspizieren.

Diese Bibliothek funktioniert auch mit JavaScript-Frameworks. Das HTML-zu-Bild-Dokumentation enthält Anweisungen zum Generieren anderer Bildformate. Es enthält auch ein Beispiel, das zeigt, wie die Bibliothek mit React verwendet wird.

Das Erstellen von Screenshots mit JavaScript ist einfach

Es gibt keine native JavaScript-Methode zum Erstellen von Bildern aus HTML-Elementen oder zum Erstellen von Screenshots des DOM. Mit Hilfe von Bibliotheken und Diensten wie HTML-to-Image wird dies jedoch zu einer einfachen Aufgabe.

Es gibt andere Möglichkeiten, ähnliche Ergebnisse zu erzielen, wie z. B. die wkhtmltoimage-Bibliothek. Mit diesem Open-Source-Tool können Sie Screenshots einer kompletten Webseite erstellen.