好贷网好贷款

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

发布时间:2016-12-4 3:52:18 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"canvas像素级操作实现滤镜之浮雕滤镜",主要涉及到canvas像素级操作实现滤镜之浮雕滤镜方面的内容,对于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<length;i++) { //遍历各像素分量 if(i<=length-4*width) { //?????? if((i+1)%4!==0) { //当右边已经没有时 if((i+4)%(width*4)==0) { data[i]=data[i-4]; data[i+1]=data[i-3]; data[i+2]=data[i-2]; data[i+3]=data[i-1]; i+=4; } else { data[i]=128+data[i]-data[i+4]; //核心代码 } } } else { //当没有下一行时 if((i+1)%4!==0) { data[i]=data[i-width*4]; } } } context.putImageData(imageData,0,0); }

上一篇:oracle产品下载地址
下一篇:如何做淘宝关键词的优化

相关文章

相关评论