Canvas กับเทคนิคการแสดงผลรูปภาพใน HTML5

โพสโดย - Thursday, Sep 1st, 2011 at 10:45 am - 805 views

Canvas กับรูปภาพ

     ผมเคยแนะนำบทความเกี่ยวกับ HTML5 มาแล้วก่อนหน้านี้ เป็นอีกหนึ่งบทความที่เขียนเกี่ยวกับฟังก์ชัน Canvas ที่มากับ HTML 5 การแสดงผลรูปภาพ ณ ที่นี้ผมจะปรับใหม่มันแสดงผลรูปแบบเป็นแบบ Noise ใครเคยใช้ Photoshop คงจะรู้จักกับฟังก์ชันนี้ดีครับ ฟังก์ชันนี้อาจจะตรงข้ามกับการปรับแต่งใน Photoshop อยู่เพราะคำสั่ง Noise ใน Photoshop นั้นจะทำการลบจุดรบกวน ที่มีลักษณะจุดที่เกิดขึ้นในภาพ แต่ฟังก์ชัน Noise ใน HTML5 ที่มาเอามาเล่านี้คือทำให้รูปภาพเป็น Noise หรือจุดรบกวน จะมีลักษณะจุดที่เกิดขึ้นในภาพนั่นเองครับ ผมเอาแค่โค้ดตัวอย่าง HTML5 มาให้ดูเท่านั้นนะครับ ดังนั้นถ้าอยากจะลงลึกต้องศึกษาแต่ละฟังก์ชันเอาเอง

ตัวอย่างรูปภาพที่ยังไม่ได้ทำการ optimize

เอารูปไปวางที่ตำแหน่งไฟล์ canvas.htm

โค้ด HTML5 แล้วตั้งชื่อเป็น canvas.htm อาจจะเอาไปวางที่ www ของ localhost

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
39
40
41
42
43
44
45
46

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Optimize image with canvas</title> 
</head> 
<body> 
	<script type="text/javascript"> 
// Load image. Waiting for onload event is important
var img = new Image;
img.onload = function() {
addNoise(img);
};
img.src = "stage-bg.jpg";
 
function addNoise(img) {
   var canvas = document.createElement('canvas');
   canvas.width = img.width;
   canvas.height = img.height;
 
   var ctx = canvas.getContext('2d');
 
   // Draw image on canvas to get its pixel data
   ctx.drawImage(img, 0, 0);
 
   // Get image pixels
   var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
   var pixels = imageData.data;
 
   for (var i = 0, il = pixels.length; i < il; i += 4) {
      // generate "noise" pixel
      var color = Math.random() * 255;
 
      // Apply noise pixel with Multiply blending mode for each color channel
      pixels[i] =     pixels[i] * color / 255;
      pixels[i + 1] = pixels[i + 1] * color / 255;
      pixels[i + 2] = pixels[i + 2] * color / 255;
   }
 
   ctx.putImageData(imageData, 0, 0);
   document.body.appendChild(canvas);
}
 
	</script> 
</body> 
</html>

ดูตัวอย่างรูปภาพที่ทำการ optimize แล้ว

ลองอีกโค้ด

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
39
40
41
42
43
44
45
46
47

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Optimize image with canvas</title> 
</head> 
<body> 
	<script type="text/javascript"> 
		var img = new Image;
			img.onload = function() {
			addNoise(img, 0.2); // pass 'alpha' argument
		};
		img.src = "stage-bg.jpg";
 
		function addNoise(img, alpha) { // new 'alpha' argument
			var canvas = document.createElement('canvas');
			canvas.width = img.width;
			canvas.height = img.height;
 
			var ctx = canvas.getContext('2d');
			ctx.drawImage(img, 0, 0);
 
			var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
			var pixels = imageData.data, r, g, b;
			var alpha1 = 1 - alpha;
 
			// pick the best array length
			var rl = Math.round(ctx.canvas.width * 3.73);
			var randoms = new Array(rl);
 
			// pre-calculate random pixels
			for (var i = 0; i < rl; i++) {
				randoms[i] = Math.random() * alpha + alpha1;
			}
 
			// apply random pixels
			for (var i = 0, il = pixels.length; i < il; i += 4) {
				pixels[i] *= randoms[i % rl];
			}
 
			ctx.putImageData(imageData, 0, 0);
 
			document.body.appendChild(canvas);
		}
	</script> 
</body> 
</html>

ได้แบบนี้

VN:F [1.9.22_1171]
Rating: 3.0/5 (1 vote cast)
Canvas กับเทคนิคการแสดงผลรูปภาพใน HTML5, 3.0 out of 5 based on 1 rating

คำค้น

โพสก่อนหน้านี้:

Comments are closed.