สร้างไฟล์รูป PNG จาก canvas


บางครั้ง javascript library เช่น chart.js ( ตัวอย่างการสร้างกราฟด้วย chartjs ) มีการสร้างรูปที่เป็นแบบ Canvas ซึ่งหากเราต้องการที่จะบันทึกภาพที่ javascript librarry สร้างเป็น canvas ไว้สามารถสร้างเป็นไฟล์ png  ไว้ได้ในตัวอย่างต่อไปนี้

<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);
        //สร้างไฟล์ ชื่อ canvas_to_png.png ตามที่ส่งข้อมูลมา
        file_put_contents($_POST["file_name"], $data);
        //$_POST["file_name"] คือชื่อไฟล์ที่ส่งมาในที่นี้ไฟล์ชื่อว่า canvas_to_png.png
        echo "create file success";//ส่งข้อความตอบกลับ

?>
 ผลลัพธ์ที่ได้คือ