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

原理：

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

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

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

1. function emboss()   {  
2.         var imageData,data,length,width;  
3.           
4.         imageData=context.getImageData(0,0,canvas.width,canvas.height);  
5.         data=imageData.data;  
6.         length=data.length;  
7.         width=imageData.width;  
8.           
9.         for(i=0;i<length;i++)    {       //遍历各像素分量  
10.               
11.             if(i<=length-4*width)    {   //??????  
12.                 if((i+1)%4!==0) {  
13.   
14.                     //当右边已经没有时                        
15.                     if((i+4)%(width*4)==0)  {  
16.                         data[i]=data[i-4];  
17.                         data[i+1]=data[i-3];  
18.                         data[i+2]=data[i-2];  
19.                         data[i+3]=data[i-1];  
20.                         i+=4;  
21.                     }  
22.                     else {  
23.                         data[i]=128+data[i]-data[i+4];  //核心代码  
24.                     }  
25.                 }  
26.             }  
27.             else {  
28.                 //当没有下一行时  
29.                 if((i+1)%4!==0) {  
30.                     data[i]=data[i-width*4];  
31.                 }  
32.             }  
33.               
34.         }  
35.         context.putImageData(imageData,0,0);  
36.     }