HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax
ใน HTML5 Canvas เราสามารถโหลดรูปให้เสร็จก่อนและใช้คลาส new Image() โหลดรูปอีกรอบหนึ่งก่อนที่ใช้
คำสั่ง drawImage ของ context 2d เพื่อวาดรูปให้แสดงผลบน Canvas
สาเหตุที่เราจำเป็นต้องใช้คำสั่งของ Ajax โหลดรูปก่อน ก็เพื่อให้แน่ใจว่ารูปนั้นโหลดเสร็จแล้วหรือในการทำงานจริง ๆ
เราอาจจะต้องการทำ preloading หรือ progress bar เพื่อโหลดรูปทั้งหมดให้เสร็จก่อนที่จะเริ่มทำงานส่วนอื่น ๆ
โหลดรูปเข้ามาใน HTML5 Canvas
เริ่มต้นสร้าง canvas ภายใน html body tag
1 |
<canvas id="canvas" width="800" height="600"></canvas> |
โหลดรูปให้เสร็จหรือทำ progress bar ในขั้นตอนนี้ ด้วย Jquery Ajax
1 2 3 4 5 6 7 8 9 10 |
var imageURL = "https://www.codebee.co.th/images/logo1@2x.png"; var request = $.ajax({ url: imageURL, crossDomain: true, type: "HEAD", cache: true, }); request.done(function () { }); |
วาดรูปลงใน Canvas ด้วยคำสั่ง drawImage ของ Context 2D
1 2 3 4 5 |
var img = new Image(); img.onload = function() { context.drawImage(this, (canvas.width*0.5)-(img.width*0.5), (canvas.height*0.5)-(img.height*0.5)); }; img.src = imageURL; |
กำหนดตำแหน่ง x และ y ของรูปให้อยู่ตรงกลางโดยคำนวณจากขนาดของ canvas และขนาดรูป
1 |
context.drawImage(this, (canvas.width*0.5)-(img.width*0.5), (canvas.height*0.5)-(img.height*0.5)); |
ใช้ CSS กำหนดตำแหน่งให้ Canvas Element อยู่ตรงกลางเว็บเบราว์เซอร์
1 2 3 4 5 6 7 8 9 10 |
<style> canvas { padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; display: block; width: 800px; } </style> |
ทดสอบการทำงานของโค๊ดทั้งหมด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <style> canvas { padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; display: block; width: 800px; } </style> </head> <body> <canvas id="canvas" width="800" height="600"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); canvas.style.backgroundColor = "#d8322b"; var imageURL = "https://www.codebee.co.th/images/logo1@2x.png"; var request = $.ajax({ url: imageURL, crossDomain: true, type: "HEAD", cache: true, }); request.done(function () { var img = new Image(); img.onload = function() { context.drawImage(this, (canvas.width*0.5)-(img.width*0.5), (canvas.height*0.5)-(img.height*0.5)); }; img.src = imageURL; }); </script> </body> </html> |
ตัวอย่างการทำงาน HTML5-โหลดรูปเข้ามาแสดงใน-Canvas-ด้วย-Ajax.html