แปลง HTML5 Canvas เป็นไฟล์ PNG

ขั้นตอนบันทึก Canvas เป็น PNG

1. สร้าง Data URL จาก Canvas:

   var dataURL = canvas.toDataURL('image/png');

2. สร้างลิงก์ดาวน์โหลด:

   <a download="newimg.png" href="dataURL">Download</a>

3. หรือตั้ง Header สำหรับการดาวน์โหลดโดยตรง:

   Content-Disposition: attachment; filename=newimg.png

เพิ่มประสิทธิภาพหน่วยความจำ (Generate Dynamically)

function downloadCanvas() {
    var dataURL = canvas.toDataURL('image/png');
    this.href = dataURL;
}
document.getElementById('downloadLink').addEventListener('click', downloadCanvas, false);

วิธีนี้สร้าง Data URL เฉพาะเมื่อคลิก ลดการใช้ RAM