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

HTML5 โหลดรูปเข้ามาแสดงใน Canvas ด้วย Ajax