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

codebee

10 years ago

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/logo1@2x.png";
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/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