canvas像素级操作实现滤镜之浮雕滤镜


原理:

1.用当前点的RGB值减去相邻点的RGB值并加上128作为新的RGB值(简单的处理)

2.当前点的值乘以2,加上128减去相邻点的值,然后减去下一行对应点的值;

  这里涉及到图像边界的处理问题,其实每一个滤镜在原则上都应该进行边界的问题处理(我是这么认为的跟精度有关)。边界问题:当处理图像边界像素时,卷积核与图像使用区域不能匹配,卷积核(问google吧)的中心与边界像素点对应,卷积运算将出现问题。
       处理办法:
              A. 忽略边界像素,即处理后的图像将丢掉这些像素。
              B. 保留原边界像素,即copy边界像素到处理后的图像。


代码实现


function emboss()	{
		var imageData,data,length,width;
		
		imageData=context.getImageData(0,0,canvas.width,canvas.height);
		data=imageData.data;
		length=data.length;
		width=imageData.width;
		
		for(i=0;i

你可能感兴趣的:(图像处理)