HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax
ใน HTML5 Canvas เราสามารถโหลดรูปให้เสร็จก่อนและใช้คลาส new Image() โหลดรูปอีกรอบหนึ่งก่อนที่ใช้
คำสั่ง drawImage ของ context 2d เพื่อวาดรูปให้แสดงผลบน Canvas
สาเหตุที่เราจำเป็นต้องใช้คำสั่งของ Ajax โหลดรูปก่อน ก็เพื่อให้แน่ใจว่ารูปนั้นโหลดเสร็จแล้วหรือในการทำงานจริง ๆ
เราอาจจะต้องการทำ preloading หรือ progress bar เพื่อโหลดรูปทั้งหมดให้เสร็จก่อนที่จะเริ่มทำงานส่วนอื่น ๆ
โหลดรูปเข้ามาใน HTML5 Canvas
เริ่มต้นสร้าง canvas ภายใน html body tag
<canvas id="canvas" width="800" height="600"></canvas>
โหลดรูปให้เสร็จหรือทำ progress bar ในขั้นตอนนี้ ด้วย Jquery Ajax
var imageURL = "https://www.codebee.co.th/images/[email protected]"; var request = $.ajax({ url: imageURL, crossDomain: true, type: "HEAD", cache: true, }); request.done(function () { });
วาดรูปลงใน Canvas ด้วยคำสั่ง drawImage ของ Context 2D
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 และขนาดรูป
context.drawImage(this, (canvas.width*0.5)-(img.width*0.5), (canvas.height*0.5)-(img.height*0.5));
ใช้ CSS กำหนดตำแหน่งให้ Canvas Element อยู่ตรงกลางเว็บเบราว์เซอร์
<style> canvas { padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; display: block; width: 800px; } </style>
ทดสอบการทำงานของโค๊ดทั้งหมด
<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/[email protected]"; 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