So verwenden Sie html2canvas, um HTML-Code in Bilder umzuwandeln

Konvertieren Sie Code in ein Bild mit

html2canvas ist eine sehr bekannte Open-Source-Bibliothek zum Erstellen von Screenshots von Webseiten aus Browsern. Sie ist einfach zu verwenden und verfügt über leistungsstarke Funktionen.

Verwenden von html2canvas

Die Verwendung von html2canvas ist sehr einfach. Es ist so einfach, dass Sie nur ein DOM-Element übergeben müssen und dann die Leinwand über den Rückruf erhalten:

Für die praktische Anwendung sind zwei Punkte zu beachten:

1.html2canvas generiert Canvas-Bildinhalte, indem der tatsächliche Stil des Elements analysiert wird, sodass es Anforderungen an das tatsächliche Layout und die visuelle Anzeige des Elements stellt. Wenn Sie einen vollständigen Screenshot erstellen möchten, trennen Sie das Element am besten vom Dokumentfluss (z. B. Position: absolut).

2. Das standardmäßig generierte Canvas-Bild ist auf Retina-Geräten sehr verschwommen. Eine Verdoppelung des Bildes kann dieses Problem lösen:

var w = $("#code").width();  
var h = $("#code").height(); //Setzen Sie die Breite und Höhe der Leinwand auf die doppelte Breite und Höhe des Containers var canvas = document.createElement("canvas");  
    Leinwand.Breite = b * 2;  
    Leinwand.Höhe = h * 2;  
    Leinwand.Stil.Breite = b + "px";  
    Leinwand.Stil.Höhe = h + "px";  
var context = canvas.getContext("2d"); //Dann skaliere die Leinwand, vergrößere das Bild um die Hälfte und zeichne es auf die Leinwand context.scale(2,2);  
    html2canvas(document.querySelector("#code"), {          
Leinwand: Leinwand,         
 onrendered: Funktion (Canvas) 
{ ...        
  }    
});

Praktische Beispiele für die Verwendung von html2canvas

1.html-Codestruktur

<Abschnitt Klasse="share_popup" id="html2canvas">  
<p>html2canvas ist sehr einfach zu verwenden. Es erfordert lediglich die Übergabe eines DOM-Elements und dann den Abruf des Canvas über einen Callback.</p>  
<p><img src="1.jpg"></p>  
<p>html2canvas ist sehr einfach zu verwenden. Es erfordert lediglich die Übergabe eines DOM-Elements und dann den Abruf des Canvas über einen Callback.</p>  
 </Abschnitt>

2.js-Codestruktur

var str = $('#html2canvas');  
//console.log(str);  
html2canvas([str.get(0)], {  
    onrendered: Funktion (Leinwand) {  
        var Bild = Canvas.toDataURL("Bild/png");  
        var pHtml = "<img src="+image+" />";  
        $('#html2canvas').html(pHtml);  
    }  
});

Zusammenfassen

Das Obige ist die Einführung des Herausgebers in die Verwendung von html2canvas zum Konvertieren von HTML-Code in Bilder. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!