So konvertieren Sie HTML-Code mit html2canvas in Bilder

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

Die Verwendung von html2canvas ist so einfach wie die Übergabe eines DOM-Elements und das anschließende Abrufen der Leinwand durch einen Rückruf:

1.html2canvas generiert Leinwandbildinhalte durch Parsen des tatsächlichen Stils des Elements und stellt daher Anforderungen an das tatsächliche Layout und die visuelle Anzeige des Elements. Wenn Sie einen vollständigen Screenshot erstellen möchten, trennen Sie das Element am besten vom Dokumentenfluss (z. B. position:absolute).

2. Das standardmäßig generierte Leinwandbild ist auf Retina-Geräten sehr unscharf. Durch die Verarbeitung in ein 2x-Bild kann dieses Problem gelöst werden:

 var w = $(#code).width(); var h = $(#code).height();//Setzen Sie die Breite und Höhe der Leinwand auf das Zweifache der Breite und Höhe des Containers. var canvas = document .createElement(canvas); canvas.width = h * 2; canvas.style.width = w + px; canvas.getContext(2d);//Skalieren Sie dann die Leinwand und verdoppeln Sie das Bild, um auf der Leinwand zu zeichnen context.scale(2,2); html2canvas(document.querySelector(#code), { canvas: canvas, onrendered: function ( Leinwand) { ... } });

1.HTML-Codestruktur

 <section class=share_popup id=html2canvas> <p>Die Verwendung von html2canvas ist sehr einfach, so einfach wie die Übergabe eines DOM-Elements und das anschließende Abrufen der Leinwand durch einen Rückruf</p> <p><img src=1.jpg >< /p> <p>Die Verwendung von html2canvas ist sehr einfach, so einfach wie die Übergabe eines DOM-Elements und das anschließende Abrufen der Leinwand durch einen Rückruf</p> </section>

2.js-Codestruktur

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

Das Obige ist die Einführung des Herausgebers zur Verwendung von html2canvas zum Konvertieren von HTML-Code in Bilder. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!