html5_canvas-เซฟรูป-1

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

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

4. สร้าง canvas element ในระหว่าง body tag


เขียน Javascript โหลดรูปและเซฟรูป

1. สร้างตัวแปร และชี้ไปที่ Canvas element ที่เราต้องการควบคุมด้วย Fabric.js

หรือถ้าเรียกด้วย javascript โดยตรงก็เขียนได้ด้วยคำสั่งดังนี้

2. เขียน Function สำหรับโหลดรูปเพิ่มเข้าไปใน Canvas

3. เขียน Function สำหรับเซฟรูปจาก Canvas โดยใช้ Ajax ส่งข้อมูลไปให้ PHP เซฟลง Server


ส่วนของ PHP ( saveCanvas.php )

PHP รับค่าที่ถูกส่งมาจาก Ajax และใช้คำสั่ง file_put_contents บันทึกรูปลงบน Server

เพียงเท่านี้เราก็จะได้รูปขนาดเท่า canvas เอาไว้ใช้งานในขั้นตอนต่อ ๆ ไป หรือบันทึกลงฐานข้อมูล
เป็นประวัติการออกแบบของผู้ใช้งาน ก็แล้วแต่จะใช้กัน

Summary
Review Date
Reviewed Item
HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP
Author Rating
51star1star1star1star1star

กระทู้ใกล้เคียง

HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax... HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax ใน HTML5 Canvas เราสามารถโหลดรูปให้เสร็จก่อนและใช้คลาส new Image() โหลดรูปอีกรอบหนึ่งก่อนที่ใช้ คำสั่ง ...
HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นด้วย Canvas... HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นและเกมส์ด้วย Canvas Canvas คือ Element อย่างหนึ่งเป็นคุณสมบัติที่เกิดขึ้นมาพร้อมกับภาษา HTML5 เป็นหนึ่งในหลาย ๆ ...
แปลง flash จัดการกับ flash ในเว็บเก่าให้เป็น html5... แปลง flash จัดการกับ flash ให้กลายเป็น html5 หากย้อนกลับไป 3-4 ปีที่ผ่านมา flash คือเทคโนโลยีสำหรับการสร้างงาน animation และงาน Interactive ที่นัก...
วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไ... วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์ วิธีทำเว็บ ให้โหลดเร็ว เคยไหมครับที่คลิกลิงค์ข่าวจาก facebook เพราะอ่านคำโปรยแล้ว อยากจะเข้...

Comments

comments