ขั้นตอนแรกคือการบันทึกหน้าเว็บเป็นผืนผ้าใบด้วยความช่วยเหลือของไลบรารี html2canvas, http://html2canvas.hertzen.com/
html2canvas (document.getElementById ("id1"), {onrendered: ฟังก์ชั่น (canvas) {document.getElementById ("id2") ภาคผนวก (Canvas); // วิธีการจัดการกับมัน ID Canvas 'โดยการแก้ไขซอร์สโค้ด HTML2CANVAS});หมายเหตุ: พารามิเตอร์แรกของ HTML2CANVAS () เป็นพื้นที่ที่จะสร้างผืนผ้าใบ หากหน้าเว็บทั้งหมดสร้างผืนผ้าใบมันเป็น document.body สำหรับรายละเอียดของพารามิเตอร์ที่สองโปรดดูคุณสมบัติต่าง ๆ ของผืนผ้าใบบนเว็บไซต์ทางการ แน่นอนคุณสามารถเพิ่มคุณสมบัติที่คุณต้องการได้โดยการแก้ไขซอร์สโค้ดเช่นการเพิ่ม ID ลงในผ้าใบ
ขั้นตอนที่สองคือการบันทึกผืนผ้าใบที่สร้างขึ้นในขั้นตอนแรกในรูปภาพ
var canvas = document.getElementById ("<span style =" font-family: arial, helvetica, sans-serif; "> canvas" </span> <span style = "font-family: arial, helvetica, sans-serif;">) $ ("<a>") .attr ("href", url) .attr ("ดาวน์โหลด", "img.png"). ภาคผนวก ("ร่างกาย"); TriggerDownload [0] .Click (); triggerdownload.remove ();ที่นี่เพียงทำตามวิธี todataurl () คุณสามารถแปลงผืนผ้าใบเป็น URL รูปภาพรูปแบบข้อมูล กำหนด URL นี้ให้กับแท็ก <img/> เพื่อแสดงภาพ ส่วนอื่น ๆ ในรหัสคือฟังก์ชั่นดาวน์โหลดที่คุณต้องการ