{"id":5342,"date":"2020-07-16T04:40:35","date_gmt":"2020-07-16T04:40:35","guid":{"rendered":"https:\/\/www.codebee.co.th\/labs\/?p=5342"},"modified":"2020-07-16T05:02:30","modified_gmt":"2020-07-16T05:02:30","slug":"html5-canvas-%e0%b8%ad%e0%b8%b1%e0%b8%9e%e0%b9%82%e0%b8%ab%e0%b8%a5%e0%b8%94-%e0%b9%81%e0%b8%a5%e0%b8%b0-%e0%b8%a5%e0%b8%9a%e0%b8%9e%e0%b8%b7%e0%b9%89%e0%b8%99%e0%b8%ab%e0%b8%a5%e0%b8%b1%e0%b8%87","status":"publish","type":"post","link":"https:\/\/www.codebee.co.th\/labs\/html5-canvas-%e0%b8%ad%e0%b8%b1%e0%b8%9e%e0%b9%82%e0%b8%ab%e0%b8%a5%e0%b8%94-%e0%b9%81%e0%b8%a5%e0%b8%b0-%e0%b8%a5%e0%b8%9a%e0%b8%9e%e0%b8%b7%e0%b9%89%e0%b8%99%e0%b8%ab%e0%b8%a5%e0%b8%b1%e0%b8%87\/","title":{"rendered":"html5 canvas \u0e2d\u0e31\u0e1e\u0e42\u0e2b\u0e25\u0e14 \u0e41\u0e25\u0e30 \u0e25\u0e1a\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e02\u0e2d\u0e07\u0e23\u0e39\u0e1b"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><\/figure>\n\n\n\n<p>canvas \u0e04\u0e37\u0e2d tags \u0e17\u0e35\u0e48\u0e40\u0e01\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19\u0e43\u0e2b\u0e21\u0e48\u0e43\u0e19 html \u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e48\u0e19 5 \u0e2b\u0e23\u0e37\u0e2d\u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e21\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e01\u0e15\u0e34\u0e14\u0e1b\u0e32\u0e01\u0e27\u0e48\u0e32 html5 \u0e04\u0e27\u0e32\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e02\u0e2d\u0e07 html5 canvas \u0e04\u0e37\u0e2d \u0e40\u0e23\u0e32\u0e08\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e01\u0e31\u0e1a\u0e27\u0e31\u0e15\u0e16\u0e38\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e27\u0e32\u0e14\u0e25\u0e07\u0e1a\u0e19 canvas \u0e44\u0e14\u0e49\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e21\u0e32\u0e01\u0e02\u0e36\u0e49\u0e19 \u0e21\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32 html element \u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b <\/p>\n\n\n\n<p>canvas \u0e08\u0e36\u0e07\u0e40\u0e2b\u0e21\u0e32\u0e30\u0e01\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32 Game, Animation Frame By Frame, Web Application \u0e43\u0e19\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e04\u0e27\u0e32\u0e21\u0e08\u0e30\u0e21\u0e32\u0e41\u0e19\u0e30\u0e19\u0e33\u0e01\u0e32\u0e23\u0e2d\u0e31\u0e1e\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e08\u0e32\u0e01\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e40\u0e23\u0e32 \u0e44\u0e1b\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e1a\u0e19 canvas \u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e43\u0e0a\u0e49\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e02\u0e2d\u0e07 canvas context2d \u0e43\u0e19\u0e01\u0e32\u0e23\u0e25\u0e1a\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e02\u0e2d\u0e07\u0e23\u0e39\u0e1b<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e2d\u0e31\u0e1e\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e1a\u0e19 Canvas<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e2a\u0e23\u0e49\u0e32\u0e07 canvas \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e39\u0e07 \u0e41\u0e25\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07 input \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a upload \u0e44\u0e1f\u0e25\u0e4c<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\"><canvas id=\"canvas\" width=\"640\" height=\"480\"><\/canvas>\n<input type=\"file\" id=\"fileupload\"><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e43\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 javascript \u0e40\u0e23\u0e35\u0e22\u0e01\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 canvas \u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49 getContext2D \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a Context2D \u0e40\u0e1b\u0e47\u0e19\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e17\u0e35\u0e48\u0e08\u0e30\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16 \u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e01\u0e31\u0e1a graphic \u0e41\u0e1a\u0e1a 2 \u0e21\u0e34\u0e15\u0e34\u0e1a\u0e19 canvas \u0e44\u0e14\u0e49 \u0e17\u0e31\u0e49\u0e07\u0e01\u0e32\u0e23\u0e27\u0e32\u0e14 \u0e01\u0e32\u0e23\u0e14\u0e36\u0e07 pixel  <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>var canvas = document.getElementById('canvas');\nvar ctx = canvas.getContext('2d');<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e40\u0e1e\u0e34\u0e48\u0e21 event \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2d\u0e31\u0e1e\u0e42\u0e2b\u0e25\u0e14\u0e23\u0e39\u0e1b\u0e41\u0e25\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e48\u0e19\u0e23\u0e31\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e39\u0e1b \u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e43\u0e0a\u0e49 context2d \u0e43\u0e19\u0e01\u0e32\u0e23\u0e27\u0e32\u0e14\u0e23\u0e39\u0e1b\u0e25\u0e07\u0e1a\u0e19 canvas<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">function handleImage(e){\n    var reader = new FileReader();\n    reader.onload = function(event){\n        var img = new Image();\n        img.onload = function(){\n            var hRatio = canvas.width \/ img.width    ;\n            var vRatio = canvas.height \/ img.height  ;\n            var ratio  = Math.min(hRatio, vRatio);\n            ctx.drawImage(img, 0,0, img.width, img.height, 0,0,img.width*ratio, img.height*ratio);\n        }\n        img.src = event.target.result;\n    }\n    reader.readAsDataURL(e.target.files[0]);     \n}\ndocument.getElementById('fileupload').onchange = handleImage;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e25\u0e1a\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e02\u0e2d\u0e07\u0e23\u0e39\u0e1b\u0e14\u0e49\u0e27\u0e22 Context2D<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e44\u0e14\u0e49\u0e23\u0e39\u0e1b\u0e17\u0e35\u0e48\u0e41\u0e2a\u0e14\u0e07\u0e1a\u0e19 canvas \u0e40\u0e23\u0e35\u0e22\u0e1a\u0e23\u0e49\u0e2d\u0e22\u0e41\u0e25\u0e49\u0e27 \u0e43\u0e19\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e15\u0e48\u0e2d\u0e44\u0e1b \u0e08\u0e30\u0e17\u0e33\u0e01\u0e32\u0e23\u0e25\u0e1a\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e02\u0e2d\u0e07\u0e23\u0e39\u0e1b \u0e42\u0e14\u0e22\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e25\u0e1a\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e02\u0e2d\u0e07\u0e23\u0e39\u0e1b\u0e19\u0e31\u0e49\u0e19 \u0e44\u0e21\u0e48\u0e44\u0e14\u0e49\u0e21\u0e35\u0e2d\u0e30\u0e44\u0e23\u0e0b\u0e31\u0e1a\u0e0b\u0e49\u0e2d\u0e19\u0e04\u0e23\u0e31\u0e1a \u0e01\u0e48\u0e2d\u0e19\u0e2d\u0e37\u0e48\u0e19\u0e15\u0e49\u0e2d\u0e07\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e01\u0e48\u0e2d\u0e19\u0e27\u0e48\u0e32 \u0e23\u0e39\u0e1b\u0e41\u0e15\u0e48\u0e25\u0e30\u0e23\u0e39\u0e1b\u0e08\u0e30\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e44\u0e1b\u0e14\u0e49\u0e27\u0e22\u0e04\u0e48\u0e32 rgba \u0e04\u0e37\u0e2d<ul><li><strong>R = red channel<\/strong> \u0e04\u0e48\u0e32\u0e2a\u0e35\u0e41\u0e14\u0e07 \u0e43\u0e2b\u0e49\u0e04\u0e48\u0e32\u0e15\u0e31\u0e27\u0e40\u0e25\u0e02\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48 0 &#8211; 255<\/li><li><strong>G = green channel<\/strong> \u0e04\u0e48\u0e32\u0e2a\u0e35\u0e40\u0e02\u0e35\u0e22\u0e27 \u0e43\u0e2b\u0e49\u0e04\u0e48\u0e32\u0e15\u0e31\u0e27\u0e40\u0e25\u0e02\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48 0 &#8211; 255<\/li><li><strong>B = blue channel<\/strong> \u0e04\u0e48\u0e32\u0e2a\u0e35\u0e19\u0e49\u0e33\u0e40\u0e07\u0e34\u0e19 \u0e43\u0e2b\u0e49\u0e04\u0e48\u0e32\u0e15\u0e31\u0e27\u0e40\u0e25\u0e02\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48 0 &#8211; 255<\/li><li><strong>A = alpha channel<\/strong> \u0e04\u0e48\u0e32\u0e04\u0e27\u0e32\u0e21\u0e42\u0e1b\u0e23\u0e07\u0e43\u0e2a \u0e43\u0e2b\u0e49\u0e04\u0e48\u0e32\u0e15\u0e31\u0e27\u0e40\u0e25\u0e02\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48 0 &#8211; 1 <\/li><\/ul><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e08\u0e32\u0e01\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\u0e40\u0e23\u0e32\u0e04\u0e07\u0e1e\u0e2d\u0e08\u0e30\u0e19\u0e36\u0e01\u0e20\u0e32\u0e1e\u0e2d\u0e2d\u0e01\u0e41\u0e25\u0e49\u0e27\u0e44\u0e0a\u0e48\u0e44\u0e2b\u0e21\u0e04\u0e23\u0e31\u0e1a\u0e27\u0e48\u0e32\u0e08\u0e30\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e04\u0e48\u0e32\u0e2a\u0e48\u0e27\u0e19\u0e44\u0e2b\u0e19\u0e02\u0e2d\u0e07\u0e23\u0e39\u0e1b \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e25\u0e1a\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32 \u0e19\u0e31\u0e48\u0e19\u0e01\u0e47\u0e04\u0e37\u0e2d\u0e04\u0e48\u0e32 A \u0e2b\u0e23\u0e37\u0e2d Alpha channel \u0e19\u0e31\u0e48\u0e19\u0e40\u0e2d\u0e07 \u0e41\u0e15\u0e48\u0e01\u0e48\u0e2d\u0e19\u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e08\u0e30\u0e25\u0e14\u0e04\u0e48\u0e32 alpha \u0e43\u0e2b\u0e49\u0e40\u0e1b\u0e47\u0e19 0 \u0e40\u0e23\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e23\u0e39\u0e49\u0e01\u0e48\u0e2d\u0e19\u0e27\u0e48\u0e32 pixel \u0e44\u0e2b\u0e19\u0e1a\u0e19\u0e23\u0e39\u0e1b\u0e04\u0e37\u0e2d\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07 background \u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e2b\u0e32\u0e27\u0e48\u0e32 pixel \u0e15\u0e33\u0e41\u0e2b\u0e19\u0e48\u0e07\u0e44\u0e2b\u0e19\u0e1a\u0e19\u0e23\u0e39\u0e1b\u0e04\u0e37\u0e2d pixel \u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07 \u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e04\u0e37\u0e2d\u0e01\u0e32\u0e23 \u0e19\u0e33\u0e04\u0e48\u0e32 rgb \u0e44\u0e1b\u0e1a\u0e19\u0e23\u0e39\u0e1b \u0e44\u0e1b\u0e41\u0e1b\u0e25\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e04\u0e48\u0e32\u0e2a\u0e35\u0e41\u0e1a\u0e1a hex \u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19 loop \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2b\u0e32\u0e04\u0e48\u0e32 hex \u0e17\u0e35\u0e48\u0e21\u0e35\u0e08\u0e33\u0e19\u0e27\u0e19\u0e21\u0e32\u0e01\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\u0e1a\u0e19\u0e23\u0e39\u0e1b \u0e40\u0e23\u0e32\u0e08\u0e30\u0e44\u0e14\u0e49\u0e04\u0e48\u0e32\u0e2a\u0e35\u0e41\u0e1a\u0e1a hex \u0e15\u0e32\u0e21\u0e25\u0e33\u0e14\u0e31\u0e1a 1 2 3 \u0e41\u0e25\u0e30\u0e19\u0e33\u0e04\u0e48\u0e32\u0e2a\u0e35 1 2 3 \u0e15\u0e32\u0e21\u0e25\u0e33\u0e14\u0e31\u0e1a\u0e19\u0e31\u0e49\u0e19\u0e44\u0e1b\u0e25\u0e14\u0e04\u0e48\u0e32 Alpha channel \u0e43\u0e2b\u0e49\u0e40\u0e17\u0e48\u0e32\u0e01\u0e31\u0e1a 0<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e43\u0e0a\u0e49\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07 getImageData \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e14\u0e36\u0e07 pixel \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e1a\u0e19\u0e23\u0e39\u0e1b\u0e21\u0e32 loop \u0e2b\u0e32\u0e04\u0e48\u0e32 rgba<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">var image = ctx.getImageData(0,0,img.width*ratio, img.height*ratio);\nvar imageData = image.data;\nvar length = imageData.length;\nfor (var i=0; i < length; i++) {\n    var r = imageData[i];\n    var g = imageData[i+1];\n    var b = imageData[i+2];\n    var a = imageData[i+3];\n}<\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e08\u0e32\u0e01\u0e19\u0e31\u0e49\u0e19\u0e41\u0e1b\u0e25\u0e07\u0e04\u0e48\u0e32 rgba \u0e40\u0e1b\u0e47\u0e19\u0e04\u0e48\u0e32\u0e2a\u0e35\u0e41\u0e1a\u0e1a hex \u0e01\u0e48\u0e2d\u0e19 <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">for (var i=0; i < length; i++) {\n    var r = imageData[i];\n    var g = imageData[i+1];\n    var b = imageData[i+2];\n    var a = imageData[i+3];\n    var hex = RGBtoHEX(parseInt(r),parseInt(g),parseInt(b));\n}\nfunction RGBtoHEX(r,g,b){\n\treturn \"#\" + componentToHex(r) + componentToHex(g) + componentToHex(b);\n}\nfunction componentToHex(c) {\n    var hex = c.toString(16);\n    return hex.length == 1 ? \"0\" + hex : hex;\n}<\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>\u0e19\u0e33\u0e04\u0e48\u0e32\u0e2a\u0e35\u0e41\u0e1a\u0e1a hex \u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e08\u0e32\u0e01\u0e01\u0e32\u0e23 loop pixel \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e02\u0e2d\u0e07\u0e23\u0e39\u0e1b ( \u0e2b\u0e23\u0e37\u0e2d\u0e08\u0e23\u0e34\u0e07 \u0e46 \u0e44\u0e21\u0e48\u0e08\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e49\u0e2d\u0e07 loop \u0e17\u0e38\u0e01 pixel \u0e01\u0e47\u0e44\u0e14\u0e49 \u0e2d\u0e32\u0e08\u0e08\u0e30\u0e43\u0e0a\u0e49 row \u0e41\u0e23\u0e01 \u0e02\u0e2d\u0e07 pixel \u0e01\u0e47\u0e1e\u0e2d\u0e08\u0e30\u0e04\u0e32\u0e14\u0e40\u0e14\u0e32\u0e04\u0e48\u0e32\u0e2a\u0e35\u0e44\u0e14\u0e49 )  \u0e44\u0e1b\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e01\u0e31\u0e1a\u0e04\u0e48\u0e32\u0e2a\u0e35 hex \u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e02\u0e2d\u0e07\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e \u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e44\u0e14\u0e49\u0e08\u0e32\u0e01\u0e17\u0e35\u0e48\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e44\u0e27\u0e49\u0e43\u0e19\u0e02\u0e49\u0e2d 2 \u0e16\u0e49\u0e32\u0e04\u0e48\u0e32\u0e15\u0e23\u0e07\u0e01\u0e31\u0e19 \u0e43\u0e2b\u0e49\u0e40\u0e23\u0e32\u0e17\u0e33\u0e01\u0e32\u0e23\u0e25\u0e14\u0e04\u0e48\u0e32 alpha channel \u0e40\u0e1b\u0e47\u0e19 0 \u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07 putImageData \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e37\u0e19\u0e04\u0e48\u0e32 pixel \u0e43\u0e2b\u0e21\u0e48\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e17\u0e35\u0e48\u0e23\u0e39\u0e1b\u0e40\u0e14\u0e34\u0e21 \u0e08\u0e30\u0e44\u0e14\u0e49 code \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 \u0e15\u0e32\u0e21\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07\u0e04\u0e23\u0e31\u0e1a<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">var color_code_for_remove = \"#fbe88c\";\nvar canvas = document.getElementById('canvas');\nvar ctx = canvas.getContext('2d');\nfunction handleImage(e){\n    var reader = new FileReader();\n    reader.onload = function(event){\n        var img = new Image();\n        img.onload = function(){\n            var hRatio = canvas.width \/ img.width    ;\n            var vRatio = canvas.height \/ img.height  ;\n            var ratio  = Math.min(hRatio, vRatio);\n            ctx.drawImage(img, 0,0, img.width, img.height, 0,0,img.width*ratio, img.height*ratio);\n\n            var image = ctx.getImageData(0,0,img.width*ratio, img.height*ratio);\n            var imageData = image.data;\n            var length = imageData.length;\n            for (var i=0; i < length; i++) {\n                var r = imageData[i];\n                var g = imageData[i+1];\n                var b = imageData[i+2];\n                var a = imageData[i+3];\n                var hex = RGBtoHEX(parseInt(r),parseInt(g),parseInt(b));\n                if(hex == color_code_for_remove){\n                    imageData[i+3] = 0;\n                }\n            }\n            \n            image.data = imageData;\n            ctx.putImageData(image, ((img.height*ratio)\/2)+130, 0);\n        }\n        img.src = event.target.result;\n    }\n    reader.readAsDataURL(e.target.files[0]);     \n}\n\nfunction RGBtoHEX(r,g,b){\n\treturn \"#\" + componentToHex(r) + componentToHex(g) + componentToHex(b);\n}\nfunction componentToHex(c) {\n    var hex = c.toString(16);\n    return hex.length == 1 ? \"0\" + hex : hex;\n}<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>canvas \u0e04\u0e37\u0e2d tags \u0e17\u0e35\u0e48\u0e40\u0e01\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19\u0e43\u0e2b\u0e21\u0e48\u0e43\u0e19 html \u0e40\u0e27\u0e2d\u0e23\u0e4c\u0e0a\u0e31\u0e48\u0e19 5 \u0e2b\u0e23\u0e37\u0e2d\u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e21\u0e31\u0e01\u0e40\u0e23\u0e35\u0e22\u0e01\u0e15\u0e34\u0e14\u0e1b\u0e32\u0e01\u0e27\u0e48\u0e32 html5 \u0e04\u0e27\u0e32\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e02\u0e2d\u0e07 html5 canvas \u0e04\u0e37\u0e2d \u0e40\u0e23\u0e32\u0e08\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e01\u0e31\u0e1a\u0e27\u0e31\u0e15\u0e16\u0e38\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e27\u0e32\u0e14\u0e25\u0e07\u0e1a\u0e19 canvas \u0e44\u0e14\u0e49\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e21\u0e32\u0e01\u0e02\u0e36\u0e49\u0e19 \u0e21\u0e32\u0e01\u0e01\u0e27\u0e48\u0e32 html element \u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b&#8230;<\/p>\n","protected":false},"author":1,"featured_media":5343,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"video","meta":{"footnotes":""},"categories":[46],"tags":[2171,403,202,2170,2167,2174,2169,2168,2172,2173],"class_list":{"0":"post-5342","1":"post","2":"type-post","3":"status-publish","4":"format-video","5":"has-post-thumbnail","6":"hentry","7":"category-website-development-","8":"tag-getimagedata-html5-canvas","9":"tag-html5","10":"tag-html5-canvas","11":"tag-html5-canvas-remove-image-background","12":"tag-html5-canvas-upload","13":"tag-html5-canvas--background","14":"tag-html5-canvas-","16":"tag-image-transparent-html5-canvas","17":"tag--html5-canvas","18":"post_format-post-format-video"},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/5342","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=5342"}],"version-history":[{"count":14,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/5342\/revisions"}],"predecessor-version":[{"id":5357,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/posts\/5342\/revisions\/5357"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/media\/5343"}],"wp:attachment":[{"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/media?parent=5342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/categories?post=5342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codebee.co.th\/labs\/wp-json\/wp\/v2\/tags?post=5342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}