So konvertieren Sie HTML-Code mit html2canvas in Bilder

In diesem Artikel wird hauptsächlich die Verwendung von html2canvas zum Konvertieren von HTML-Code in Bilder vorgestellt. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not auf

html2canvas verweisen Die berühmte Open-Source-Bibliothek zum Erstellen von Screenshots von Browser-Webseiten ist einfach zu verwenden und verfügt über leistungsstarke Funktionen. Dieser

wandelt den Code mithilfe von

html2canvas um, einer sehr bekannten Open-Source-Bibliothek zum Erstellen von Screenshots von Browser-Webseiten. Sie ist sehr einfach zu verwenden und sehr kraftvoll.

html2canvas verwenden

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

Bei der tatsächlichen Verwendung sind zwei Punkte zu beachten:

1.html2canvas generiert Leinwandbildinhalte durch Parsen des tatsächlichen Stils des Elements. Es gibt also Anforderungen an das tatsächliche Layout und die visuelle Darstellung von Elementen. Wenn Sie einen vollständigen Screenshot machen möchten, trennen Sie am besten die Elemente aus dem Dokumentenfluss (z. B. Position:absolut)

2. Das standardmäßig generierte Leinwandbild ist auf dem Retina-Gerät sehr unscharf. Die Verarbeitung in ein 2x-Bild kann dieses Problem lösen:

var w = $("#code").width();  
var h = $("#code").height();//要将 canvas 的宽高设置成容器宽高的 2 倍  
var canvas = document.createElement("canvas");  
    canvas.width = w * 2;  
    canvas.height = h * 2;  
    canvas.style.width = w + "px";  
    canvas.style.height = h + "px";  
var context = canvas.getContext("2d");//然后将画布缩放，将图像放大两倍画到画布上  
    context.scale(2,2);  
    html2canvas(document.querySelector("#code"), {          
canvas: canvas,         
 onrendered: function(canvas) 
{                ...        
  }    
});

Tatsächlicher Fall der Verwendung von html2canvas

1 .html-Codestruktur

<section class="share_popup" id="html2canvas">  
<p>html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas</p>  
<p><img src="1.jpg"></p>  
<p>html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas</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+" />";  
        $(&#39;#html2canvas&#39;).html(pHtml);  
    }  
});

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Javascript HTML5 Canvas implementiert ziehbare Provinzkarte von China

HTML5 Zeichnen von Linien für das einfache Zeichnen auf Leinwand

Das obige ist der detaillierte Inhalt vonSo konvertieren Sie HTML-Code mit html2canvas in Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!