บางครั้ง javascript library เช่น chart.js ( ตัวอย่างการสร้างกราฟด้วย chartjs ) มีการสร้างรูปที่เป็นแบบ Canvas ซึ่งหากเราต้องการที่จะบันทึกภาพที่ javascript librarry สร้างเป็น canvas ไว้สามารถสร้างเป็นไฟล์ png ไว้ได้ในตัวอย่างต่อไปนี้
รับเขียนโปรแกรม PHP และ Javascript
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
<!-- สร้างปุ่ม To Png File โดยกดแล้วจะไปทำงานที่ function to_png_file() -->
<button onclick='to_png_file()' type='button'>To Png File</button>
<script>
//สร้าง canvas ที่ Element myCanvas
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
async function to_png_file()
{
var file_data = canvas.toDataURL();//เก็บ data URL เอาไว้ในตัวแปร file_data
//ส่ง dataURL ให้ไฟล์ create_png_file.php โดยใช้ javascript fetch
var res = await fetch("create_png_file.php",
{
headers: {'Content-Type':'application/x-www-form-urlencoded'},
method: "POST",
body: "&file_data="+file_data+"&file_name=canvas_to_png.png"
});
var response_text=await res.text();//รับข้อความที่ส่งกลับมา
//แสดงข้อความที่ส่งกลับมา
alert(response_text);
}
</script>
ไฟล์ PHP สำหรับสร้าง ไฟล์รูปภาพ PNG ชื่อว่า create_png_file.php
<?php
//รับ data URL ที่ส่งมา
$img = str_replace('data:image/png;base64,', '', $_POST["file_data"]);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
file_put_contents($_POST["file_name"], $data);
//$_POST["file_name"] คือชื่อไฟล์ที่ส่งมาในที่นี้ไฟล์ชื่อว่า canvas_to_png.png
echo "create file success";//ส่งข้อความตอบกลับ
?>
ผลลัพธ์ที่ได้คือ
