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>

1	<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 () {
			
});

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;

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));

1	context.drawImage(this, (canvas.width0.5)-(img.width0.5), (canvas.height0.5)-(img.height0.5));

ใช้ CSS กำหนดตำแหน่งให้ Canvas Element อยู่ตรงกลางเว็บเบราว์เซอร์

<style>
canvas {
	padding-left: 0;
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
	width: 800px;
}
</style>

<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>

<html>

<head>

<style>

canvas {

padding-left: 0;

padding-right: 0;

margin-left: auto;

margin-right: auto;

display: block;

width: 800px;

}

</style>

</head>

<body>

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

Summary

Article Name

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

Description

ใน HTML5 Canvas เราสามารถโหลดรูปให้เสร็จก่อนและใช้คลาส new Image() โหลดรูปอีกรอบหนึ่งก่อนที่ใช้ คำสั่ง drawImage ของ context 2d เพื่อวาดรูปให้แสดงผลบน Canvas

Author

codebee

Publisher Name

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

Publisher Logo

กระทู้ใกล้เคียง

HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ P... HTML5 Canvas เซฟรูปจากแคนวาสด้วย jQuery Ajax และ PHP ตัวอย่าง HTML5 Canvas เซฟรูป การเขียนโปรแกรมด้วย Javascript บนแคนวาส Canvas เป็นความส...

HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นด้วย Canvas... HTML5 เริ่มต้นเขียนเว็บแอพพลิเคชั่นและเกมส์ด้วย Canvas Canvas คือ Element อย่างหนึ่งเป็นคุณสมบัติที่เกิดขึ้นมาพร้อมกับภาษา HTML5 เป็นหนึ่งในหลาย ๆ ...

แปลง flash จัดการกับ flash ในเว็บเก่าให้เป็น html5... แปลง flash จัดการกับ flash ให้กลายเป็น html5 หากย้อนกลับไป 3-4 ปีที่ผ่านมา flash คือเทคโนโลยีสำหรับการสร้างงาน animation และงาน Interactive ที่นัก...

วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไ... วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์ วิธีทำเว็บ ให้โหลดเร็ว เคยไหมครับที่คลิกลิงค์ข่าวจาก facebook เพราะอ่านคำโปรยแล้ว อยากจะเข้...