Javascript menyimpan halaman web sebagai imej dengan bantuan kemahiran html2canvas library_javascript

Langkah pertama ialah menyimpan halaman web sebagai kanvas Kanvas, menggunakan perpustakaan html2canvas, http://html2canvas.hertzen.com/

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

Nota: Parameter pertama html2canvas() ialah kawasan di mana kanvas akan dihasilkan. Jika kanvas dijana untuk keseluruhan halaman web, ia adalah document.body. Untuk parameter kedua, sila rujuk tapak web rasmi untuk menetapkan pelbagai atribut kanvas Sudah tentu, anda boleh mengubah suai kod sumber untuk menambah atribut yang anda inginkan, seperti menambah id pada kanvas.

Langkah kedua ialah menyimpan kanvas yang dijana dalam langkah pertama sebagai gambar

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();

Hanya fokus pada kaedah toDataURL() di sini Anda boleh menukar kanvas menjadi URL imej dalam bentuk data ini pada teg kod ialah fungsi muat turun yang anda perlukan.