Javascript speichert Webseiten mithilfe der Javascript-Kenntnisse der html2canvas-Bibliothek als Bilder

Der erste Schritt besteht darin, die Webseite mithilfe der html2canvas-Bibliothek http://html2canvas.hertzen.com/ als Canvas-Leinwand zu speichern.

html2canvas(document.getElementById("id1"), { 
onrendered: function(canvas) { 
document.getElementById("id2").appendChild(canvas);//生成画布后如何处理，当然可以在新标签打开，在浮层展示等等 
}, 
canvas_id: 'canvas'//通过修改html2canvas源码添加canvas的id 
});

Hinweis: Der erste Parameter von html2canvas() ist der Bereich, in dem Canvas generiert werden soll. Wenn der Canvas für die gesamte Webseite generiert wird, ist es document.body. Informationen zum zweiten Parameter finden Sie auf der offiziellen Website, um die verschiedenen Attribute der Leinwand festzulegen. Natürlich können Sie den Quellcode ändern, um die gewünschten Attribute hinzuzufügen, z. B. das Hinzufügen einer ID zur Leinwand.

Der zweite Schritt besteht darin, die im ersten Schritt generierte Leinwand als Bild zu speichern

var canvas = document.getElementById("<span style="font-family: Arial, Helvetica, sans-serif;">canvas"</span><span style="font-family: Arial, Helvetica, sans-serif;">),</span> 
url = canvas.toDataURL();// 
//以下代码为下载此图片功能 
var triggerDownload = $("<a>").attr("href", url).attr("download", "img.png").appendTo("body"); 
triggerDownload[0].click(); 
triggerDownload.remove();

Konzentrieren Sie sich hier einfach auf die toDataURL()-Methode. Sie können diese URL dem -Tag zuweisen Code sind die Download-Funktionen, die Sie benötigen.