{"id":1937,"date":"2016-08-19T15:46:43","date_gmt":"2016-08-19T15:46:43","guid":{"rendered":"https:\/\/www.codebee.co.th\/labs\/?p=1937"},"modified":"2017-02-15T03:48:14","modified_gmt":"2017-02-15T03:48:14","slug":"html5-canvas-%e0%b9%80%e0%b8%8b%e0%b8%9f%e0%b8%a3%e0%b8%b9%e0%b8%9b%e0%b8%88%e0%b8%b2%e0%b8%81%e0%b9%81%e0%b8%84%e0%b8%99%e0%b8%a7%e0%b8%b2%e0%b8%aa%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-jquery-ajax","status":"publish","type":"post","link":"https:\/\/www.codebee.co.th\/labs\/html5-canvas-%e0%b9%80%e0%b8%8b%e0%b8%9f%e0%b8%a3%e0%b8%b9%e0%b8%9b%e0%b8%88%e0%b8%b2%e0%b8%81%e0%b9%81%e0%b8%84%e0%b8%99%e0%b8%a7%e0%b8%b2%e0%b8%aa%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-jquery-ajax\/","title":{"rendered":"HTML5 Canvas \u0e40\u0e0b\u0e1f\u0e23\u0e39\u0e1b\u0e08\u0e32\u0e01\u0e41\u0e04\u0e19\u0e27\u0e32\u0e2a\u0e14\u0e49\u0e27\u0e22 jQuery Ajax \u0e41\u0e25\u0e30 PHP"},"content":{"rendered":"

HTML5 Canvas \u0e40\u0e0b\u0e1f\u0e23\u0e39\u0e1b\u0e08\u0e32\u0e01\u0e41\u0e04\u0e19\u0e27\u0e32\u0e2a\u0e14\u0e49\u0e27\u0e22 jQuery Ajax \u0e41\u0e25\u0e30 PHP<\/h3>\n

<\/br><\/p>\n

\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07 HTML5 Canvas \u0e40\u0e0b\u0e1f\u0e23\u0e39\u0e1b<\/a><\/p><\/blockquote>\n

\u0e01\u0e32\u0e23\u0e40\u0e02\u0e35\u0e22\u0e19\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e14\u0e49\u0e27\u0e22 Javascript \u0e1a\u0e19\u0e41\u0e04\u0e19\u0e27\u0e32\u0e2a Canvas \u0e40\u0e1b\u0e47\u0e19\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e2d\u0e35\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e17\u0e35\u0e48\u0e15\u0e34\u0e14\u0e21\u0e32\u0e01\u0e31\u0e1a HTML5
\n\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e41\u0e2d\u0e1e\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e48\u0e19\u0e41\u0e25\u0e30\u0e40\u0e01\u0e21\u0e2a\u0e4c\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19 \u0e01\u0e32\u0e23\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e2b\u0e23\u0e37\u0e2d\u0e01\u0e32\u0e23 Screen Capture
\n\u0e40\u0e1b\u0e47\u0e19\u0e2d\u0e35\u0e01\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e48\u0e19\u0e17\u0e35\u0e48\u0e21\u0e31\u0e01\u0e08\u0e30\u0e21\u0e35\u0e04\u0e39\u0e48\u0e21\u0e32\u0e01\u0e31\u0e1a\u0e41\u0e2d\u0e1e\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e48\u0e19\u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e01\u0e21\u0e2a\u0e4c \u0e42\u0e14\u0e22\u0e40\u0e09\u0e1e\u0e32\u0e30\u0e41\u0e2d\u0e1e\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e48\u0e19\u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e15\u0e01\u0e41\u0e15\u0e48\u0e07 \u0e40\u0e0a\u0e48\u0e19\u0e41\u0e2d\u0e1e\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e48\u0e19
\n\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e2a\u0e37\u0e49\u0e2d\u0e1c\u0e49\u0e32\u0e2b\u0e23\u0e37\u0e2d\u0e41\u0e2d\u0e1e\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e48\u0e19\u0e41\u0e15\u0e48\u0e07\u0e15\u0e31\u0e27\u0e25\u0e30\u0e04\u0e23 \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e41\u0e25\u0e49\u0e27\u0e01\u0e47\u0e08\u0e30\u0e21\u0e35\u0e01\u0e32\u0e23\u0e40\u0e0b\u0e1f\u0e23\u0e39\u0e1b \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e25\u0e07\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07 \u0e41\u0e0a\u0e23\u0e4c \u0e2b\u0e23\u0e37\u0e2d
\n\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e25\u0e07\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e19\u0e33\u0e44\u0e1b\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e43\u0e19\u0e42\u0e2d\u0e01\u0e32\u0e2a\u0e15\u0e48\u0e2d\u0e44\u0e1b
\n<\/p>\n

\u0e15\u0e48\u0e2d\u0e44\u0e1b\u0e1a\u0e19 facebook \u0e2b\u0e23\u0e37\u0e2d\u0e2d\u0e30\u0e44\u0e23\u0e01\u0e47\u0e41\u0e25\u0e49\u0e27\u0e41\u0e15\u0e48 \u0e27\u0e31\u0e19\u0e19\u0e35\u0e49\u0e40\u0e23\u0e32\u0e21\u0e32\u0e25\u0e2d\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e01\u0e32\u0e23\u0e40\u0e0b\u0e1f\u0e23\u0e39\u0e1b\u0e08\u0e32\u0e01 Canvas \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e14\u0e39\u0e04\u0e23\u0e31\u0e1a\u0e27\u0e48\u0e32\u0e08\u0e30\u0e21\u0e35
\n\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e08\u0e32\u0e01\u0e2b\u0e19\u0e49\u0e32 canvas \u0e40\u0e1b\u0e47\u0e19\u0e23\u0e39\u0e1b\u0e44\u0e14\u0e49\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e44\u0e23
\n<\/br><\/p>\n

\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e21\u0e37\u0e2d\u0e41\u0e25\u0e30 Framework<\/h4>\n

1. \u0e14\u0e32\u0e27\u0e19\u0e4c\u0e42\u0e2b\u0e25\u0e14 fabric.js \u0e41\u0e25\u0e30 jQuery ( \u0e08\u0e30\u0e43\u0e0a\u0e49 canvas element \u0e18\u0e23\u0e23\u0e21\u0e14\u0e32\u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07 include fabric.js \u0e01\u0e47\u0e44\u0e14\u0e49\u0e04\u0e23\u0e31\u0e1a )
\n2. \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e44\u0e1f\u0e25\u0e4c main.js \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e02\u0e35\u0e22\u0e19 javascript \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e0b\u0e1f\u0e44\u0e1f\u0e25\u0e4c\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e
\n3. \u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 include \u0e44\u0e1f\u0e25\u0e4c jquery.js fabric.js \u0e41\u0e25\u0e30 main.js<\/p>\n

<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.0\/jquery.min.js\"><\/script> \r\n<script type=\"text\/javascript\" src=\"fabric.min.js\"><\/script> \r\n<script type=\"text\/javascript\" src=\"main.js\"><\/script><\/pre>\n
4. \u0e2a\u0e23\u0e49\u0e32\u0e07 canvas element \u0e43\u0e19\u0e23\u0e30\u0e2b\u0e27\u0e48\u0e32\u0e07 body tag<\/p>\n
<canvas width=\"530\" height=\"300\" id=\"canvas\"><\/canvas><\/pre>\n
<\/br><\/p>\n
\u0e40\u0e02\u0e35\u0e22\u0e19 Javascript \u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e25\u0e30\u0e40\u0e0b\u0e1f\u0e23\u0e39\u0e1b<\/h4>\n
1. \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e15\u0e31\u0e27\u0e41\u0e1b\u0e23 \u0e41\u0e25\u0e30\u0e0a\u0e35\u0e49\u0e44\u0e1b\u0e17\u0e35\u0e48 Canvas element \u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e04\u0e27\u0e1a\u0e04\u0e38\u0e21\u0e14\u0e49\u0e27\u0e22 Fabric.js<\/p>\n
var Canvas = new fabric.Canvas('canvas');<\/pre>\n
\u0e2b\u0e23\u0e37\u0e2d\u0e16\u0e49\u0e32\u0e40\u0e23\u0e35\u0e22\u0e01\u0e14\u0e49\u0e27\u0e22 javascript \u0e42\u0e14\u0e22\u0e15\u0e23\u0e07\u0e01\u0e47\u0e40\u0e02\u0e35\u0e22\u0e19\u0e44\u0e14\u0e49\u0e14\u0e49\u0e27\u0e22\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e14\u0e31\u0e07\u0e19\u0e35\u0e49<\/p>\n
var Canvas = document.getElementById('canvas');<\/pre>\n
2. \u0e40\u0e02\u0e35\u0e22\u0e19 Function \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e02\u0e49\u0e32\u0e44\u0e1b\u0e43\u0e19 Canvas<\/p>\n
function LoadImage(url){\r\n\tfabric.Image.fromURL(imageURL, function(img) {\r\n\t\tCanvas.setActiveObject(img);\r\n\t\tCanvas.centerObject(img)\r\n\t\tCanvas.add(img);\r\n\t});\r\n}<\/pre>\n
3. \u0e40\u0e02\u0e35\u0e22\u0e19 Function \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e40\u0e0b\u0e1f\u0e23\u0e39\u0e1b\u0e08\u0e32\u0e01 Canvas \u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 Ajax \u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e1b\u0e43\u0e2b\u0e49 PHP \u0e40\u0e0b\u0e1f\u0e25\u0e07 Server<\/p>\n
function SaveImage(){\r\n\t$.ajax({\r\n\t\ttype: 'POST',\r\n\t\turl: 'saveCanvas.php',\r\n\t\tdata: {\r\n\t\t\tbase64Image:Canvas.toDataURL('png')},\r\n\t\tsuccess: function(json) {\r\n\t\t\t  \r\n\t\t}\r\n\t});\r\n}<\/pre>\n
<\/br><\/p>\n
\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 PHP ( saveCanvas.php )<\/h4>\n
PHP \u0e23\u0e31\u0e1a\u0e04\u0e48\u0e32\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e2a\u0e48\u0e07\u0e21\u0e32\u0e08\u0e32\u0e01 Ajax \u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07 file_put_contents \u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e23\u0e39\u0e1b\u0e25\u0e07\u0e1a\u0e19 Server<\/p>\n
<?php\r\n\r\n$base64Image = $_POST['base64Image'];\r\nfile_put_contents('image.png', base64_decode(str_replace('data:image\/png;base64,','',$base64Image)));\r\n\r\n?><\/pre>\n
\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e40\u0e17\u0e48\u0e32\u0e19\u0e35\u0e49\u0e40\u0e23\u0e32\u0e01\u0e47\u0e08\u0e30\u0e44\u0e14\u0e49\u0e23\u0e39\u0e1b\u0e02\u0e19\u0e32\u0e14\u0e40\u0e17\u0e48\u0e32 canvas \u0e40\u0e2d\u0e32\u0e44\u0e27\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e43\u0e19\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e15\u0e48\u0e2d \u0e46 \u0e44\u0e1b \u0e2b\u0e23\u0e37\u0e2d\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e25\u0e07\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25
\n\u0e40\u0e1b\u0e47\u0e19\u0e1b\u0e23\u0e30\u0e27\u0e31\u0e15\u0e34\u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e02\u0e2d\u0e07\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 \u0e01\u0e47\u0e41\u0e25\u0e49\u0e27\u0e41\u0e15\u0e48\u0e08\u0e30\u0e43\u0e0a\u0e49\u0e01\u0e31\u0e19<\/p>\n","protected":false},"excerpt":{"rendered":"
HTML5 Canvas \u0e40\u0e0b\u0e1f\u0e23\u0e39\u0e1b\u0e08\u0e32\u0e01\u0e41\u0e04\u0e19\u0e27\u0e32\u0e2a\u0e14\u0e49\u0e27\u0e22 jQuery Ajax \u0e41\u0e25\u0e30 PHP \u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07 HTML5 Canvas \u0e40\u0e0b\u0e1f\u0e23\u0e39\u0e1b \u0e01\u0e32\u0e23\u0e40\u0e02\u0e35\u0e22\u0e19\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e14\u0e49\u0e27\u0e22 Javascript \u0e1a\u0e19\u0e41\u0e04\u0e19\u0e27\u0e32\u0e2a Canvas \u0e40\u0e1b\u0e47\u0e19\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e2d\u0e35\u0e01\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e17\u0e35\u0e48\u0e15\u0e34\u0e14\u0e21\u0e32\u0e01\u0e31\u0e1a HTML5 \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e41\u0e2d\u0e1e\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e48\u0e19\u0e41\u0e25\u0e30\u0e40\u0e01\u0e21\u0e2a\u0e4c\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19 \u0e01\u0e32\u0e23\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e2b\u0e23\u0e37\u0e2d\u0e01\u0e32\u0e23 Screen…<\/p>\n","protected":false},"author":1,"featured_media":1950,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"video","meta":{"footnotes":""},"categories":[46],"tags":[633,479,403,202,634,88,933,371,614,478,549,501,203,635,935],"class_list":["post-1937","post","type-post","status-publish","format-video","has-post-thumbnail","hentry","category-website-development-","tag-canvas-save-image","tag-html-ajax","tag-html5","tag-html5-canvas","tag-html5-canvas-","tag-html5-","tag-933","tag-371","tag-614","tag--html5","tag-549","tag-501","tag--html5-canvas","tag-635","tag-935","post_format-post-format-video"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/1937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/comments?post=1937"}],"version-history":[{"count":14,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/1937\/revisions"}],"predecessor-version":[{"id":1954,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/1937\/revisions\/1954"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/media\/1950"}],"wp:attachment":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/media?parent=1937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/categories?post=1937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/tags?post=1937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}