HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP
การเขียนโปรแกรมด้วย Javascript บนแคนวาส Canvas เป็นความสามารถอีกอย่างหนึ่งที่ติดมากับ HTML5
ทำให้เราสามารถพัฒนาแอพพลิเคชั่นและเกมส์ได้ง่ายขึ้น การบันทึกรูปภาพหน้าจอหรือการ Screen Capture
เป็นอีกหนึ่งฟังก์ชั่นที่มักจะมีคู่มากับแอพพลิเคชั่นหรือเกมส์ โดยเฉพาะแอพพลิเคชั่นสไตล์ออกแบบตกแต่ง เช่นแอพพลิเคชั่น
ออกแบบเสื้อผ้าหรือแอพพลิเคชั่นแต่งตัวละคร เมื่อออกแบบเสร็จแล้วก็จะมีการเซฟรูป บันทึกลงเครื่อง แชร์ หรือ
บันทึกข้อมูลรูปภาพลงฐานข้อมูลเพื่อนำไปใช้งานในโอกาสต่อไป
ต่อไปบน facebook หรืออะไรก็แล้วแต่ วันนี้เรามาลองทดสอบการเซฟรูปจาก Canvas ทั้งหน้าดูครับว่าจะมี
วิธีการเปลี่ยนจากหน้า canvas เป็นรูปได้อย่างไร
เตรียมเครื่องมือและ Framework
1. ดาวน์โหลด fabric.js และ jQuery ( จะใช้ canvas element ธรรมดาโดยไม่ต้อง include fabric.js ก็ได้ครับ )
2. สร้างไฟล์ main.js สำหรับเขียน javascript สำหรับเซฟไฟล์รูปภาพ
3. เรียกใช้งาน include ไฟล์ jquery.js fabric.js และ main.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript" src="fabric.min.js"></script> <script type="text/javascript" src="main.js"></script>
4. สร้าง canvas element ในระหว่าง body tag
<canvas width="530" height="300" id="canvas"></canvas>
เขียน Javascript โหลดรูปและเซฟรูป
1. สร้างตัวแปร และชี้ไปที่ Canvas element ที่เราต้องการควบคุมด้วย Fabric.js
var Canvas = new fabric.Canvas('canvas');
หรือถ้าเรียกด้วย javascript โดยตรงก็เขียนได้ด้วยคำสั่งดังนี้
var Canvas = document.getElementById('canvas');
2. เขียน Function สำหรับโหลดรูปเพิ่มเข้าไปใน Canvas
function LoadImage(url){ fabric.Image.fromURL(imageURL, function(img) { Canvas.setActiveObject(img); Canvas.centerObject(img) Canvas.add(img); }); }
3. เขียน Function สำหรับเซฟรูปจาก Canvas โดยใช้ Ajax ส่งข้อมูลไปให้ PHP เซฟลง Server
function SaveImage(){ $.ajax({ type: 'POST', url: 'saveCanvas.php', data: { base64Image:Canvas.toDataURL('png')}, success: function(json) { } }); }
ส่วนของ PHP ( saveCanvas.php )
PHP รับค่าที่ถูกส่งมาจาก Ajax และใช้คำสั่ง file_put_contents บันทึกรูปลงบน Server
<?php $base64Image = $_POST['base64Image']; file_put_contents('image.png', base64_decode(str_replace('data:image/png;base64,','',$base64Image))); ?>
เพียงเท่านี้เราก็จะได้รูปขนาดเท่า canvas เอาไว้ใช้งานในขั้นตอนต่อ ๆ ไป หรือบันทึกลงฐานข้อมูล
เป็นประวัติการออกแบบของผู้ใช้งาน ก็แล้วแต่จะใช้กัน