Konvertieren Sie HTML in JavaScript in ein Bild

  2. How-To's
  3. HTML Howtos
  4. Konvertieren Sie HTML in JavaScript in …
Shubham Vora 15 Februar 2024
HTML HTML Image HTML Convert
  1. Verwenden Sie die JavaScript-Bibliothek html2canvas, um HTML in Bilder umzuwandeln
  2. Verwenden Sie die dom-to-image-JavaScript-Bibliothek, um HTML in ein Bild umzuwandeln
Konvertieren Sie HTML in JavaScript in ein Bild

Wir werden in diesem Artikel lernen, den HTML-Code als Bild zu rendern. Das bedeutet, dass wir den 2D-Schnappschuss der Webseite, die HTML enthält, erstellen und auf der Webseite anzeigen oder das Bild herunterladen.

Wir haben externe JavaScript-Bibliotheken verwendet, um HTML in Bildern in den folgenden Methoden zu rendern.

Verwenden Sie die JavaScript-Bibliothek html2canvas, um HTML in Bilder umzuwandeln

Wir haben im folgenden Beispiel die Bibliothek html2canvas verwendet, um HTML in ein Bild zu konvertieren und es auf der Webseite darzustellen.

Zum Beispiel haben wir zwei div-Elemente mit unterschiedlichen IDs erstellt, my-div und ShowImage. Wir werden den Schnappschuss des div-Elements mit der my-div-ID machen und den Schnappschuss innerhalb des div-Elements mit der ID ShowImage anzeigen.

Außerdem haben wir das Element <button> erstellt und dafür das Ereignis onclick hinzugefügt. Wenn der Benutzer auf die Schaltfläche klickt, wird die Funktion convertToImage() aufgerufen, die HTML in ein Bild umwandelt.

<body>
    <div id="my-div">This is sample div element.</div>
    <div id="ShowImage"></div>
    <button onclick="convertToImage()">Convert</button>
</body>

Wir haben einige Stile auf die div-Elemente im CSS unten angewendet. Wir haben die height, width und background-color für die div-Elemente mit CSS-Eigenschaften gesetzt.

Außerdem legen wir den Rand für alle div-Elemente fest, um etwas Platz zu lassen.

div {
    display: block;
    margin: 20px;
}
#my-div {
    height: 300px;
    width: 300px;
    background-color: red;
}

Um die Bibliothek html2canvas zu verwenden, müssen Benutzer sie von (https://html2canvas.hertzen.com/) auf ihren lokalen Computer herunterladen. Danach können Benutzer die Bibliothek über das <script>-Tag in den HTML-Code einfügen, indem sie dem src-Attribut des <script>-Tags den richtigen Pfad der Bibliotheksdatei zuweisen.

<script src="html2canvas.js" type="text/javascript"></script>

Die Funktion convertToImage() enthält den JavaScript-Code, um das HTML in ein Bild umzuwandeln.

Im folgenden Beispielcode haben wir auf das div-Element mit der ID my-div unter Verwendung ihrer ID in JavaScript zugegriffen und die html2canvas-Funktion angewendet, um das Bild dieses bestimmten HTML-Elements zu erfassen. Die Leinwand speichert das Bild, und wir haben dieses Bild an das div-Element mit der ID ShowImage angehängt.

<script>
    function convertToImage() {
        html2canvas(document.getElementById("my-div")).then(function (canvas) {
        document.getElementById("ShowImage").appendChild(canvas);
        });
    }
</script>

Ausgang:

HTML in Bild umwandeln - eins

In der obigen Ausgabeanimation können Benutzer sehen, dass beim Klicken auf die Schaltfläche Konvertieren das neue Bild des Elements <div> im Dokumentkörper gerendert wird.

Darüber hinaus können wir den HTML-Link erstellen, um das aufgenommene Bild herunterzuladen und lokal zu speichern.

Hier haben wir das neue Element <a> mit document.createElement("a") erstellt und in der Variablen anchor gespeichert. Außerdem haben wir das Element <a> mit document.body.appendChild(anchor) an den Dokumentkörper angehängt.

Als nächstes haben wir die herunterladbare Bilddatei mit anchor.download = "sample.jpg" benannt und das href-Attribut für den Anker mit der toDataURL-Eigenschaft der canvas-Variablen gesetzt. Außerdem haben wir den Wert _blank für das Attribut target von anchor gesetzt, um das Bild herunterladbar zu machen.

Die Ausgabe zeigt auch, dass beim Klicken auf die Schaltfläche Konvertieren das Bild des Elements div an die Webseite angehängt und dieselbe Bilddatei auf den lokalen Computer heruntergeladen wird.

<script>
    function convertToImage() {
        html2canvas(document.getElementById("my-div")).then(function (canvas) {
        var anchor = document.createElement("a");
        document.body.appendChild(anchor);
        document.getElementById("ShowImage").appendChild(canvas);
        anchor.download = "sample.jpg";
        anchor.href = canvas.toDataURL();
        anchor.target = "_blank";
        anchor.click();
       });
    }
</script>

Ausgang:

HTML in Bild umwandeln - zwei

Verwenden Sie die dom-to-image-JavaScript-Bibliothek, um HTML in ein Bild umzuwandeln

Der folgende HTML-Code ist fast derselbe wie der im obigen Beispiel verwendete, der zwei div-Elemente mit unterschiedlichen Werten des id-Attributs enthält.

<div id="my-div">Demo texts.</div>
<div id="ShowImage"></div>
<button onclick="convertToImage()">Convert to image</button>

Der folgende CSS-Code enthält das Styling für den HTML-Code und ist fast identisch mit dem, was wir im obigen Beispielcode verwendet haben.

div {
    display: block;
    margin: 20px;
}
#my-div {
    height: 100px;
    width: 100px;
    background-color: blue;
}

Um die domtoimage-Bibliothek zu verwenden, müssen wir sie lokal herunterladen oder wir können ihr CDN verwenden. Hier müssen Benutzer das untenstehende CDN der Bibliothek domtoimage in den Abschnitt <head> des HTML-Codes einbetten.

<script
      src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"
      integrity="sha512-01CJ9/g7e8cUmY0DFTMcUw/ikS799FHiOA0eyHsUWfOetgbx/t6oV4otQ5zXKQyIrQGTHSmRVPIgrgLcZi/WMA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

Im folgenden JavaScript-Code haben wir über seine ID auf das Element div zugegriffen und es in der Variablen element gespeichert.

Als nächstes haben wir die Bibliothek domtoimage verwendet, um das HTML in ein png-Bild zu konvertieren. Wir haben das neue leere Bild mit dem Konstruktor new Image() erstellt und in der Variablen newImage gespeichert.

Außerdem weisen wir den URL-Wert dem Attribut src der Variablen newImage zu. Danach hängen wir das newImage an die Webseite an.

Außerdem haben wir den catch-Block verwendet, um die Fehler zu behandeln.

<script>
    function convertToImage(){
    var element = document.getElementById("my-div");
    domtoimage
        .toPng(element)
        .then(function (URL) {
            var newImg = new Image();
            newImg.src = URL;
            document.getElementById('ShowImage').appendChild(newImg);
        })
        .catch(function (error) {
            console.error("error");
        });
    }
</script>

Ausgang:

HTML in Bild umwandeln - drei

Benutzer können beobachten, dass wir den Schnappschuss des blauen div machen; Immer wenn wir auf die Schaltfläche klicken, fügt unser Code einen neuen Schnappschuss des blauen div an den Dokumentkörper an.

Autor: Shubham Vora
Shubham Vora avatar Shubham Vora avatar

Shubham is a software developer interested in learning and writing about various technologies. He loves to help people by sharing vast knowledge about modern technologies via different platforms such as the DelftStack.com website.

LinkedIn GitHub

Verwandter Artikel - HTML Image

Verwandter Artikel - HTML Convert