Site icon บริษัท โค๊ดบี จำกัด

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

codebee
html5_canvas-เซฟรูป-1

html5_canvas-เซฟรูป-1

<h3>HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP<&sol;h3>&NewLine;<p><&sol;br><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;html5canvas&lowbar;save&lowbar;image&sol;" target&equals;"&lowbar;blank">ตัวอย่าง HTML5 Canvas เซฟรูป<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p>การเขียนโปรแกรมด้วย Javascript บนแคนวาส Canvas เป็นความสามารถอีกอย่างหนึ่งที่ติดมากับ HTML5<br &sol;>&NewLine;ทำให้เราสามารถพัฒนาแอพพลิเคชั่นและเกมส์ได้ง่ายขึ้น การบันทึกรูปภาพหน้าจอหรือการ Screen Capture<br &sol;>&NewLine;เป็นอีกหนึ่งฟังก์ชั่นที่มักจะมีคู่มากับแอพพลิเคชั่นหรือเกมส์ โดยเฉพาะแอพพลิเคชั่นสไตล์ออกแบบตกแต่ง เช่นแอพพลิเคชั่น<br &sol;>&NewLine;ออกแบบเสื้อผ้าหรือแอพพลิเคชั่นแต่งตัวละคร เมื่อออกแบบเสร็จแล้วก็จะมีการเซฟรูป บันทึกลงเครื่อง แชร์ หรือ<br &sol;>&NewLine;บันทึกข้อมูลรูปภาพลงฐานข้อมูลเพื่อนำไปใช้งานในโอกาสต่อไป<br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p>ต่อไปบน facebook หรืออะไรก็แล้วแต่ วันนี้เรามาลองทดสอบการเซฟรูปจาก Canvas ทั้งหน้าดูครับว่าจะมี<br &sol;>&NewLine;วิธีการเปลี่ยนจากหน้า canvas เป็นรูปได้อย่างไร<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>เตรียมเครื่องมือและ Framework<&sol;h4>&NewLine;<p>1&period; ดาวน์โหลด fabric&period;js และ jQuery &lpar; จะใช้ canvas element ธรรมดาโดยไม่ต้อง include fabric&period;js ก็ได้ครับ &rpar;<br &sol;>&NewLine;2&period; สร้างไฟล์ main&period;js สำหรับเขียน javascript สำหรับเซฟไฟล์รูปภาพ<br &sol;>&NewLine;3&period; เรียกใช้งาน include ไฟล์ jquery&period;js fabric&period;js และ main&period;js<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;script src&equals;"https&colon;&sol;&sol;ajax&period;googleapis&period;com&sol;ajax&sol;libs&sol;jquery&sol;3&period;1&period;0&sol;jquery&period;min&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi; &NewLine;&lt&semi;script type&equals;"text&sol;javascript" src&equals;"fabric&period;min&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi; &NewLine;&lt&semi;script type&equals;"text&sol;javascript" src&equals;"main&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi;<&sol;pre>&NewLine;<p>4&period; สร้าง canvas element ในระหว่าง body tag<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;canvas width&equals;"530" height&equals;"300" id&equals;"canvas"&gt&semi;&lt&semi;&sol;canvas&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>เขียน Javascript โหลดรูปและเซฟรูป<&sol;h4>&NewLine;<p>1&period; สร้างตัวแปร และชี้ไปที่ Canvas element ที่เราต้องการควบคุมด้วย Fabric&period;js<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >var Canvas &equals; new fabric&period;Canvas&lpar;'canvas'&rpar;&semi;<&sol;pre>&NewLine;<p>หรือถ้าเรียกด้วย javascript โดยตรงก็เขียนได้ด้วยคำสั่งดังนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >var Canvas &equals; document&period;getElementById&lpar;'canvas'&rpar;&semi;<&sol;pre>&NewLine;<p>2&period; เขียน Function สำหรับโหลดรูปเพิ่มเข้าไปใน Canvas<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >function LoadImage&lpar;url&rpar;&lbrace; &NewLine;&Tab;fabric&period;Image&period;fromURL&lpar;imageURL&comma; function&lpar;img&rpar; &lbrace; &NewLine;&Tab;&Tab;Canvas&period;setActiveObject&lpar;img&rpar;&semi; &NewLine;&Tab;&Tab;Canvas&period;centerObject&lpar;img&rpar; &NewLine;&Tab;&Tab;Canvas&period;add&lpar;img&rpar;&semi; &NewLine;&Tab;&rcub;&rpar;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p>3&period; เขียน Function สำหรับเซฟรูปจาก Canvas โดยใช้ Ajax ส่งข้อมูลไปให้ PHP เซฟลง Server<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >function SaveImage&lpar;&rpar;&lbrace; &NewLine;&Tab;&dollar;&period;ajax&lpar;&lbrace; &NewLine;&Tab;&Tab;type&colon; 'POST'&comma; &NewLine;&Tab;&Tab;url&colon; 'saveCanvas&period;php'&comma; &NewLine;&Tab;&Tab;data&colon; &lbrace; &NewLine;&Tab;&Tab;&Tab;base64Image&colon;Canvas&period;toDataURL&lpar;'png'&rpar;&rcub;&comma; &NewLine;&Tab;&Tab;success&colon; function&lpar;json&rpar; &lbrace; &NewLine;&Tab;&Tab;&Tab; &NewLine;&Tab;&Tab;&rcub; &NewLine;&Tab;&rcub;&rpar;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ส่วนของ PHP &lpar; saveCanvas&period;php &rpar;<&sol;h4>&NewLine;<p>PHP รับค่าที่ถูกส่งมาจาก Ajax และใช้คำสั่ง file&lowbar;put&lowbar;contents บันทึกรูปลงบน Server<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;&quest;php &NewLine; &NewLine;&dollar;base64Image &equals; &dollar;&lowbar;POST&lbrack;'base64Image'&rsqb;&semi; &NewLine;file&lowbar;put&lowbar;contents&lpar;'image&period;png'&comma; base64&lowbar;decode&lpar;str&lowbar;replace&lpar;'data&colon;image&sol;png&semi;base64&comma;'&comma;''&comma;&dollar;base64Image&rpar;&rpar;&rpar;&semi; &NewLine; &NewLine;&quest;&gt&semi;<&sol;pre>&NewLine;<p>เพียงเท่านี้เราก็จะได้รูปขนาดเท่า canvas เอาไว้ใช้งานในขั้นตอนต่อ ๆ ไป หรือบันทึกลงฐานข้อมูล<br &sol;>&NewLine;เป็นประวัติการออกแบบของผู้ใช้งาน ก็แล้วแต่จะใช้กัน<&sol;p>&NewLine;

Exit mobile version