HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP

ตัวอย่าง HTML5 Canvas เซฟรูป

การเขียนโปรแกรมด้วย 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 เอาไว้ใช้งานในขั้นตอนต่อ ๆ ไป หรือบันทึกลงฐานข้อมูล
เป็นประวัติการออกแบบของผู้ใช้งาน ก็แล้วแต่จะใช้กัน

Post Views: 416

HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP