เราต้องจับภาพ (แปลงเป็นรูป) ส่วนหนึ่งของมาร์กอัพเว็บไซต์และบันทึกภาพนั้นหรือนำไปใช้ต่อ เนื่องจากปัญหานี้รวมถึงการจับภาพองค์ประกอบมาร์กอัพทั่วไป ไม่ใช่แค่ canvas จึงค่อนข้างซับซ้อน หากจะทำจากศูนย์ เราจะใช้ไลบรารีภายนอก html2canvas ที่ทำตามชื่อเลย คือแปลงมาร์กอัพที่ต้องการเป็น canvas แล้วเราก็ดาวน์โหลด canvas เป็นภาพได้
ตัวอย่าง
JS Bin First Block Second Block Third Block
ผลลัพธ์
ผลลัพธ์ของโค้ดจะเป็น:
AFTER CLICKING DOWNLOAD BUTTON
สังเกตว่าภาพที่สองมี canvas ติดปุ่ม "Download" ซึ่งเราสามารถคลิกขวาและบันทึกได้
