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

html5 canvas อัพโหลด และ ลบพื้นหลังของรูป

codebee
html5-canvas-อัพโหลด-และ-ลบพื้นหลังของรูป

html5-canvas-อัพโหลด-และ-ลบพื้นหลังของรูป

&NewLine;<figure class&equals;"wp-block-video"><&sol;figure>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">canvas คือ tags ที่เกิดขึ้นใหม่ใน html เวอร์ชั่น 5 หรือที่เรามักเรียกติดปากว่า html5 ความสามารถของ html5 canvas คือ เราจะสามารถจัดการกับวัตถุที่ถูกวาดลงบน canvas ได้ละเอียดมากขึ้น มากกว่า html element ทั่วไป <&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph">canvas จึงเหมาะกับการพัฒนา Game&comma; Animation Frame By Frame&comma; Web Application ในบทความความจะมาแนะนำการอัพโหลดรูปจากเครื่องเรา ไปแสดงผลบน canvas จากนั้นใช้ความสามารถของ canvas context2d ในการลบพื้นหลังของรูป<&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading">อัพโหลดรูปแสดงผลบน Canvas<&sol;h2>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>เริ่มต้นสร้าง canvas กำหนดความกว้างและความสูง และสร้าง input สำหรับ upload ไฟล์<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted"><canvas id&equals;"canvas" width&equals;"640" height&equals;"480"><&sol;canvas>&NewLine;<input type&equals;"file" id&equals;"fileupload"><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ในส่วนของ javascript เรียกใช้งาน canvas และใช้ getContext2D สำหรับ Context2D เป็นคำสั่งที่จะทำให้เราสามารถ จัดการกับ graphic แบบ 2 มิติบน canvas ได้ ทั้งการวาด การดึง pixel <&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-code"><code>var canvas &equals; document&period;getElementById&lpar;'canvas'&rpar;&semi;&NewLine;var ctx &equals; canvas&period;getContext&lpar;'2d'&rpar;&semi;<&sol;code><&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>เพิ่ม event สำหรับอัพโหลดรูปและสร้างฟังก์ชั่นรับข้อมูลรูป จากนั้นใช้ context2d ในการวาดรูปลงบน canvas<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted">function handleImage&lpar;e&rpar;&lbrace;&NewLine; var reader &equals; new FileReader&lpar;&rpar;&semi;&NewLine; reader&period;onload &equals; function&lpar;event&rpar;&lbrace;&NewLine; var img &equals; new Image&lpar;&rpar;&semi;&NewLine; img&period;onload &equals; function&lpar;&rpar;&lbrace;&NewLine; var hRatio &equals; canvas&period;width &sol; img&period;width &semi;&NewLine; var vRatio &equals; canvas&period;height &sol; img&period;height &semi;&NewLine; var ratio &equals; Math&period;min&lpar;hRatio&comma; vRatio&rpar;&semi;&NewLine; ctx&period;drawImage&lpar;img&comma; 0&comma;0&comma; img&period;width&comma; img&period;height&comma; 0&comma;0&comma;img&period;width&ast;ratio&comma; img&period;height&ast;ratio&rpar;&semi;&NewLine; &rcub;&NewLine; img&period;src &equals; event&period;target&period;result&semi;&NewLine; &rcub;&NewLine; reader&period;readAsDataURL&lpar;e&period;target&period;files&lbrack;0&rsqb;&rpar;&semi; &NewLine;&rcub;&NewLine;document&period;getElementById&lpar;'fileupload'&rpar;&period;onchange &equals; handleImage&semi;<&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<h2 class&equals;"wp-block-heading">ลบพื้นหลังของรูปด้วย Context2D<&sol;h2>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>หลังจากที่เราได้รูปที่แสดงบน canvas เรียบร้อยแล้ว ในขั้นตอนต่อไป จะทำการลบพื้นหลังของรูป โดยขั้นตอนการลบพื้นหลังของรูปนั้น ไม่ได้มีอะไรซับซ้อนครับ ก่อนอื่นต้องเข้าใจก่อนว่า รูปแต่ละรูปจะประกอบไปด้วยค่า rgba คือ<ul><li><strong>R &equals; red channel<&sol;strong> ค่าสีแดง ให้ค่าตัวเลขตั้งแต่ 0 &&num;8211&semi; 255<&sol;li><li><strong>G &equals; green channel<&sol;strong> ค่าสีเขียว ให้ค่าตัวเลขตั้งแต่ 0 &&num;8211&semi; 255<&sol;li><li><strong>B &equals; blue channel<&sol;strong> ค่าสีน้ำเงิน ให้ค่าตัวเลขตั้งแต่ 0 &&num;8211&semi; 255<&sol;li><li><strong>A &equals; alpha channel<&sol;strong> ค่าความโปรงใส ให้ค่าตัวเลขตั้งแต่ 0 &&num;8211&semi; 1 <&sol;li><&sol;ul><&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>จากข้อมูลด้านบนเราคงพอจะนึกภาพออกแล้วไช่ไหมครับว่าจะเปลี่ยนค่าส่วนไหนของรูป เพื่อลบพื้นหลังของเรา นั่นก็คือค่า A หรือ Alpha channel นั่นเอง แต่ก่อนที่เราจะลดค่า alpha ให้เป็น 0 เราต้องรู้ก่อนว่า pixel ไหนบนรูปคือส่วนของ background วิธีการหาว่า pixel ตำแหน่งไหนบนรูปคือ pixel ที่เป็นส่วนของพื้นหลัง วิธีการคือการ นำค่า rgb ไปบนรูป ไปแปลงเป็นค่าสีแบบ hex จากนั้น loop เพื่อหาค่า hex ที่มีจำนวนมากที่สุดบนรูป เราจะได้ค่าสีแบบ hex ตามลำดับ 1 2 3 และนำค่าสี 1 2 3 ตามลำดับนั้นไปลดค่า Alpha channel ให้เท่ากับ 0<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>ใช้คำสั่ง getImageData เพื่อดึง pixel ทั้งหมดบนรูปมา loop หาค่า rgba<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted">var image &equals; ctx&period;getImageData&lpar;0&comma;0&comma;img&period;width&ast;ratio&comma; img&period;height&ast;ratio&rpar;&semi;&NewLine;var imageData &equals; image&period;data&semi;&NewLine;var length &equals; imageData&period;length&semi;&NewLine;for &lpar;var i&equals;0&semi; i < length&semi; i&plus;&plus;&rpar; &lbrace;&NewLine; var r &equals; imageData&lbrack;i&rsqb;&semi;&NewLine; var g &equals; imageData&lbrack;i&plus;1&rsqb;&semi;&NewLine; var b &equals; imageData&lbrack;i&plus;2&rsqb;&semi;&NewLine; var a &equals; imageData&lbrack;i&plus;3&rsqb;&semi;&NewLine;&rcub;<&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>จากนั้นแปลงค่า rgba เป็นค่าสีแบบ hex ก่อน <&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted">for &lpar;var i&equals;0&semi; i < length&semi; i&plus;&plus;&rpar; &lbrace;&NewLine; var r &equals; imageData&lbrack;i&rsqb;&semi;&NewLine; var g &equals; imageData&lbrack;i&plus;1&rsqb;&semi;&NewLine; var b &equals; imageData&lbrack;i&plus;2&rsqb;&semi;&NewLine; var a &equals; imageData&lbrack;i&plus;3&rsqb;&semi;&NewLine; var hex &equals; RGBtoHEX&lpar;parseInt&lpar;r&rpar;&comma;parseInt&lpar;g&rpar;&comma;parseInt&lpar;b&rpar;&rpar;&semi;&NewLine;&rcub;&NewLine;function RGBtoHEX&lpar;r&comma;g&comma;b&rpar;&lbrace;&NewLine;&Tab;return "&num;" &plus; componentToHex&lpar;r&rpar; &plus; componentToHex&lpar;g&rpar; &plus; componentToHex&lpar;b&rpar;&semi;&NewLine;&rcub;&NewLine;function componentToHex&lpar;c&rpar; &lbrace;&NewLine; var hex &equals; c&period;toString&lpar;16&rpar;&semi;&NewLine; return hex&period;length &equals;&equals; 1 &quest; "0" &plus; hex &colon; hex&semi;&NewLine;&rcub;<&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<ul class&equals;"wp-block-list"><li>นำค่าสีแบบ hex ที่ได้จากการ loop pixel ทั้งหมดของรูป &lpar; หรือจริง ๆ ไม่จำเป็นต้อง loop ทุก pixel ก็ได้ อาจจะใช้ row แรก ของ pixel ก็พอจะคาดเดาค่าสีได้ &rpar; ไปเทียบกับค่าสี hex พื้นหลังของรูปภาพ ที่เราได้จากที่อธิบายไว้ในข้อ 2 ถ้าค่าตรงกัน ให้เราทำการลดค่า alpha channel เป็น 0 และใช้คำสั่ง putImageData เพื่อคืนค่า pixel ใหม่กลับไปที่รูปเดิม จะได้ code ทั้งหมด ตามด้านล่างครับ<&sol;li><&sol;ul>&NewLine;&NewLine;&NewLine;&NewLine;<pre class&equals;"wp-block-preformatted">var color&lowbar;code&lowbar;for&lowbar;remove &equals; "&num;fbe88c"&semi;&NewLine;var canvas &equals; document&period;getElementById&lpar;'canvas'&rpar;&semi;&NewLine;var ctx &equals; canvas&period;getContext&lpar;'2d'&rpar;&semi;&NewLine;function handleImage&lpar;e&rpar;&lbrace;&NewLine; var reader &equals; new FileReader&lpar;&rpar;&semi;&NewLine; reader&period;onload &equals; function&lpar;event&rpar;&lbrace;&NewLine; var img &equals; new Image&lpar;&rpar;&semi;&NewLine; img&period;onload &equals; function&lpar;&rpar;&lbrace;&NewLine; var hRatio &equals; canvas&period;width &sol; img&period;width &semi;&NewLine; var vRatio &equals; canvas&period;height &sol; img&period;height &semi;&NewLine; var ratio &equals; Math&period;min&lpar;hRatio&comma; vRatio&rpar;&semi;&NewLine; ctx&period;drawImage&lpar;img&comma; 0&comma;0&comma; img&period;width&comma; img&period;height&comma; 0&comma;0&comma;img&period;width&ast;ratio&comma; img&period;height&ast;ratio&rpar;&semi;&NewLine;&NewLine; var image &equals; ctx&period;getImageData&lpar;0&comma;0&comma;img&period;width&ast;ratio&comma; img&period;height&ast;ratio&rpar;&semi;&NewLine; var imageData &equals; image&period;data&semi;&NewLine; var length &equals; imageData&period;length&semi;&NewLine; for &lpar;var i&equals;0&semi; i < length&semi; i&plus;&plus;&rpar; &lbrace;&NewLine; var r &equals; imageData&lbrack;i&rsqb;&semi;&NewLine; var g &equals; imageData&lbrack;i&plus;1&rsqb;&semi;&NewLine; var b &equals; imageData&lbrack;i&plus;2&rsqb;&semi;&NewLine; var a &equals; imageData&lbrack;i&plus;3&rsqb;&semi;&NewLine; var hex &equals; RGBtoHEX&lpar;parseInt&lpar;r&rpar;&comma;parseInt&lpar;g&rpar;&comma;parseInt&lpar;b&rpar;&rpar;&semi;&NewLine; if&lpar;hex &equals;&equals; color&lowbar;code&lowbar;for&lowbar;remove&rpar;&lbrace;&NewLine; imageData&lbrack;i&plus;3&rsqb; &equals; 0&semi;&NewLine; &rcub;&NewLine; &rcub;&NewLine; &NewLine; image&period;data &equals; imageData&semi;&NewLine; ctx&period;putImageData&lpar;image&comma; &lpar;&lpar;img&period;height&ast;ratio&rpar;&sol;2&rpar;&plus;130&comma; 0&rpar;&semi;&NewLine; &rcub;&NewLine; img&period;src &equals; event&period;target&period;result&semi;&NewLine; &rcub;&NewLine; reader&period;readAsDataURL&lpar;e&period;target&period;files&lbrack;0&rsqb;&rpar;&semi; &NewLine;&rcub;&NewLine;&NewLine;function RGBtoHEX&lpar;r&comma;g&comma;b&rpar;&lbrace;&NewLine;&Tab;return "&num;" &plus; componentToHex&lpar;r&rpar; &plus; componentToHex&lpar;g&rpar; &plus; componentToHex&lpar;b&rpar;&semi;&NewLine;&rcub;&NewLine;function componentToHex&lpar;c&rpar; &lbrace;&NewLine; var hex &equals; c&period;toString&lpar;16&rpar;&semi;&NewLine; return hex&period;length &equals;&equals; 1 &quest; "0" &plus; hex &colon; hex&semi;&NewLine;&rcub;<&sol;pre>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><&sol;p>&NewLine;&NewLine;&NewLine;&NewLine;<p class&equals;"wp-block-paragraph"><&sol;p>&NewLine;

Exit mobile version