วิธีบันทึกข้อมูล Canvas เป็นไฟล์ใน HTML5

ขั้นตอนการบันทึก Canvas เป็นรูปภาพ

1. สร้าง Canvas ใน HTML:

   <canvas id="canvas1" width="250" height="150"></canvas>

2. วาดกราฟิกด้วย JavaScript:

   var canvas = document.getElementById("canvas1");
   var ctx = canvas.getContext("2d");
   ctx.moveTo(0,0);
   ctx.lineTo(300,200);
   ctx.stroke();

3. บันทึกเป็น Data URL (PNG):

   var imgUrl = canvas.toDataURL(); // คืนค่า base64 PNG
   document.getElementById('imgElement').src = imgUrl; // แสดงใน img tag

เมธอด toDataURL() จะคืนค่า Data URI ที่สามารถนำไปบันทึกเป็นไฟล์ภาพได้