canvas的像素级操作——3.使用卷积矩阵

canvas的像素级操作——3.使用卷积矩阵
作者：Neoxone 发表时间： 2012年01月12号，星期四阅读：7,178 次

利用卷积矩阵(Convolution Matrix)操作像素，我们可以很方便的得到诸如模糊、边缘检测、锐化、浮雕和斜角这样的效果。

常用的矩阵类型是 3 x 3 矩阵，另外还有5 x 5的矩阵。

点阵图中的每一个像素被称为“初步像素”，用与卷积矩阵同样面积的“初步像素”从左到右从上到下与卷积矩阵中相应位置的值相乘，再将得到的9个或25个中间值相加，就得到了“初步像素”矩阵中央的一个值的结果值再与Divisor（因子）相除，与Offset（偏移量）相加，最后得到终值。如下图所示：

应用卷积矩阵实现特效:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>利用卷积矩阵实现特效</title>
</head>
<body>
<canvas id="canvas1" width="200" height="200" title="浮雕效果"></canvas>
<canvas id="canvas2" width="200" height="200" title="边缘检测"></canvas>
<canvas id="canvas3" width="200" height="200" title="锐化"></canvas>
<canvas id="canvas4" width="200" height="200" title="基本模糊"></canvas>
<canvas id="canvas5" width="200" height="200" ></canvas>
<script type="text/javascript">
function convolution(imgPixels, matrix, divisor, offset){
	/* 卷积矩阵应用函数 */
    var w = imgPixels.width,
		h = imgPixels.height,
		d = imgPixels.data;
	var canvas = document.createElement('canvas'),
		ctx = canvas.getContext('2d'),
		newImgPixels = ctx.createImageData(w,h);
	for (var y = 1; y < h-1; y++) {
			for (var x = 1; x < w-1; x++) {
				for (var c = 0; c < 3; c++) {
					/* RGB通道 */
					var i = (y*w + x)*4 + c;
					newImgPixels.data[i]=(matrix[0]*d[i-(w+1)*4] + matrix[1]*d[i-w*4] + matrix[2]*d[i-(w-1)*4]
										+ matrix[3]*d[i-4]       + matrix[4]*d[i]     + matrix[5]*d[i+4]
										+ matrix[6]*d[i+(w-1)*4] + matrix[7]*d[i+w*4] + matrix[8]*d[i+(w+1)*4])
										/ divisor + offset;
				}
				newImgPixels.data[(y*w + x)*4 + 3] = 255;
			}
		}
    return newImgPixels;
}
(function(){
	/* demo */
	var imgObj = new Image();
		imgObj.src = '/blog/resource/avatar/avatar_s.jpg';
	var embossing = {
		/* 浮雕效果 */
			matrix : [-2, -1, 0,
					  -1,  1, 1,
					   0,  1, 2],
			divisor: 1,
			offset : 0
		},
		edge = {
		/* 边缘检测 */
			matrix : [0, -1, 0,
					 -1,  4, -1,
					  0, -1, 0],
			divisor: 1,
			offset : 0
		},
		sharpening = {
		/* 锐化 */
			matrix : [ 0, -1, 0,
					  -1,  5, -1,
					  0,  -1, 0],
			divisor: 1,
			offset : 0
		},
		blur = {
		/* 基本模糊 */
			matrix : [0, 1, 0,
					  1, 1, 1,
					  0, 1, 0],
			divisor: 5,
			offset : 0
		},
		oneboys = {
		/* 胡诌的一个矩阵 */
			matrix : [ 0, 1, 4,
					  -1,  5, -1,
					  3,  -1, 2],
			divisor: 5,
			offset : 0
		};
	function process(obj,effect){
		var context = document.getElementById(obj).getContext('2d');
			context.drawImage(imgObj, 0, 0);
		var imgPixels = context.getImageData(0, 0, imgObj.width, imgObj.height);
		imgPixels = convolution(imgPixels, effect.matrix, effect.divisor, effect.offset)
		context.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
	}
	var canvas = document.getElementsByTagName('canvas');
	for(var i = 0, l = canvas.length; i < l; i++ ){
		var loadObj = new Load(canvas[i]);
		(function(obj){
			obj.loading();
			imgObj.addEventListener('load',obj.loaded,false);
		})(loadObj);
	};
	imgObj.addEventListener('load',function(){
		process('canvas1',embossing);
		process('canvas2',edge);
		process('canvas3',sharpening);
		process('canvas4',blur);
		process('canvas5',oneboys);
	},false);
})()
/* 以下与示例代码无关 */
function Load(canvas){
	/* canvas Loading 效果 */
	var backCtx = canvas.getContext('2d');
		backWidth = canvas.width;
		backHeight = canvas.height;
	var drawIntervalID,
		spokes = 7;
	var	drawPad = document.createElement('canvas');
		drawPad.width = 30;
		drawPad.height = 30;
	var	drawCtx = drawPad.getContext('2d');
		drawCtx.translate(drawPad.width/2, drawPad.height/2);
		drawCtx.lineWidth = 5;
		drawCtx.lineCap = "round";
		drawCtx.strokeStyle = "rgba(0,0,0,0.1)";
		drawCtx.fillStyle = "#fff";
	var draw = function(){
		drawCtx.fillRect(0,0, drawPad.width ,drawPad.height);
		drawCtx.rotate(Math.PI*2/spokes);
		for (var i=0; i<spokes; i++) {
			drawCtx.rotate(Math.PI*2/spokes);
			drawCtx.beginPath();
			drawCtx.moveTo(0,8);
			drawCtx.lineTo(0,10);
			drawCtx.stroke();
		}
		backCtx.drawImage(drawPad,(backWidth - drawPad.width)/2, (backHeight - drawPad.height)/2);
	}
	this.loading = function(){
		 drawIntervalID = setInterval(draw,200);
	}
	this.loaded = function(){
		clearInterval(drawIntervalID);
		backCtx.clearRect((backWidth - drawPad.width)/2, (backHeight - drawPad.height)/2, drawPad.width ,drawPad.height);
	}
}
</script>
</body>
</html>

上面demo中卷积的实现函数来自于在HTML 5 的 Canvas 中应用卷积矩阵对图像处理

推荐一篇有趣的文章：卷积的物理意义

标签： blur, Convolution, imageData, Matrix, sharpening

这篇文章发布于 2012年01月12号，星期四，15:17，归类于 HTML5。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

CSSASSCSSASS

canvas的像素级操作——3.使用卷积矩阵
作者：Neoxone 发表时间： 2012年01月12号，星期四阅读：7,178 次

相关文章:

一条评论发表在“canvas的像素级操作——3.使用卷积矩阵”上

留下回复

canvas的像素级操作——3.使用卷积矩阵作者：Neoxone 发表时间： 2012年01月12号，星期四 阅读：7,178 次

相关文章:

一条评论 发表在“canvas的像素级操作——3.使用卷积矩阵”上

留下回复

canvas的像素级操作——3.使用卷积矩阵
作者：Neoxone 发表时间： 2012年01月12号，星期四阅读：7,178 次

一条评论发表在“canvas的像素级操作——3.使用卷积矩阵”上