html2canvas ist eine ziemlich gute JavaScript-Klassenbibliothek, die einige neue Funktionen von HTML5 und CSS3 verwendet, um die Funktion zum Erstellen von Screenshots von Webseiten auf dem Client zu realisieren. html2canvas realisiert die Funktion des Erstellens von Screenshots der Seite, indem es die DOM- und Stilinformationen der Elemente der Seite abruft und diese in ein Leinwandbild rendert. Da jeder Browser Seiten unterschiedlich darstellt, sind auch die erzeugten Bilder unterschiedlich. Obwohl es sich noch in der Entwicklungsphase befindet, lohnt es sich dennoch, darauf zu blicken. Es ist kein Rendering vom Server erforderlich, das gesamte Bild wird im Client-Browser erstellt. Wenn der Browser Canvas nicht unterstützt, wird stattdessen die Flashcanvas- oder ExplorerCanvas-Technologie verwendet.
github: github.com/niklasvh/html2canvas
Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<title>HTML5实现网页截屏</title>
<script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<script>
function taoge(){
html2canvas($('#xttblog'), {
onrendered: function(canvas) {
// canvas 是最后一个渲染的<canvas> 元素
$('#btn').attr( 'href' , canvas.toDataURL() ) ;
$('#btn').attr( 'download' , 'xttblog.png' ) ;
}
});
}
</script>
</head>
<body>
<p id="xttblog">
<img src="http://www.xttblog.com/wp-content/uploads/2016/03/123.png"/>
<p>业余草，做专业的IT学习交流网站</p>
<p>QQ群：135430763</p>
<p>原文地址：http://www.xttblog.com/?p=261</p>
<a href="" id="btn" onclick="taoge();">截图</a>
</p>
</body>
</html>Das obige ist der detaillierte Inhalt vonSo erstellen Sie Screenshots von Webseiten (html2canvas). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So erstellen Sie Screenshots auf Huawei-Handys
So machen Sie Screenshots auf dem Huawei mate60pro
So konvertieren Sie Kleinbuchstaben in C-Sprache in Großbuchstaben
So heben Sie Gebühren auf WeChat ab
Empfohlene Tools zur Festplattenerkennung
Datenwiederherstellung von Solid-State-Laufwerken
Lösung für Java-Bericht, dass Build-Pfad-Einträge leer sind
Was ist Cloud-Space?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
