Canvas操作图片像素

  Canvas支持直接处理图片中的像素，通过对图片像素进行各种类型的处理，能够实现不同的图片效果，本文的示例图片来自参考文献1，图片像素处理方法参照的参考文献2-7。
  Canvas主要通过两种方式获取图片像素集合：

• getImageData；该方法获取Canvas中指定位置的图片像素集合，函数返回的是canvasPixelArray对象，该对象中的data属性保存的是像素集合的一维数组，通过处理该数组实现像素处理；
• createImageData：该方法在canvas中创建一个图片区域，然后返回该区域的像素集合；

  像素处理完成后，通过调用canvas的putImageData图片像素集合内容显示在指定的地方。
  下面通过实现几种像素处理方式来展示图片处理效果，更详细的说明可以看参考文献2-7。

颜色反转

  颜色反转效果原理是用255减去每个像素中的r、g、b值。示例代码如下所示：

	var cnv = document.getElementById("canvas");
    var cxt=cnv.getContext("2d");

    var cnvInverse = document.getElementById("inverse");
    var cxtInverse=cnvInverse.getContext("2d");

    var image=new Image();
    image.src= "image/Gundam.jpeg";

    image.onload= function(             )
    {
        cxt.drawImage(image,0,0,cnv.clientWidth,cnv.clientHeight); 
		var imgData=cxt.getImageData(0,0,cnv.clientWidth,cnv.clientHeight);
	    var data=imgData.data;
		for(var i=0;i<data.length;i+=4)
	    {
	        data[i+0]=255-data[i+0];
	        data[i+1]=255-data[i+1];
	        data[i+2]=255-data[i+2];
	    } 
	    cxtInverse.putImageData(imgData,0,0);                
    }  

  但是真正执行代码时，显示的图片效果是下面这样的，处理后的图片没有显示出来。
  打开火狐浏览器提供的调试器界面，发现代码报如下的操作不安全的错误。
  错误原因好像是由于跨域访问造成的，看的不是太明白（还是个网页编程新手)。根据参考文献3的解决办法，关闭了如下图所示的火狐浏览器的设置。
  在刷新网页，即可看到颜色反转的效果，如下图所示。

黑白效果

  就是将彩色图片转换为灰度图，参考文献中提供了三种做法：平均值、加权、最大值。
  平均值做法是将每个像素的r、g、b值都设置为他们三个和的平均值，示例代码及效果图如下所示

	for(var i=0;i<data.length;i+=4)
     {
         var average=(data[i+0]+data[i+1]+data[i+2])/3;
         data[i+0]=255-average;
         data[i+1]=255-average;
         data[i+2]=255-average;
     } 

  加权做法是将每个像素的r、g、b值都设置为他们三个的加权和，权重系统可以调节，本文是参照的参考文献2中的权重，加权代码及示意图如下所示

	var average=data[i+0]*0.3+data[i+1]*0.6+data[i+2]*0.1;

  最大值做法是将每个像素的r、g、b值都设置为他们三个中的最大值，代码及示意图如下所示：

	var average=Math.max(Math.max(data[i+0],data[i+1]),data[i+2]);

亮度效果

  主要是指将每个像素的r、g、b值加上相同的值，可以是正值，也可以是负值。示例代码如下：

	 for(var i=0;i<data.length;i+=4)
     {
         var a=-50;
         data[i+0]+=a;
         data[i+1]+=a;
         data[i+2]+=a;
     } 

  统一加正值的效果如下：
  统一加负值的效果如下：

复古效果

  复古效果是对每个像素中的r、g、b值都进行加权平均处理，加权参数可以调节，本文参考的是参考文献2中的代码，其示例代码及效果如下所示：

	for(var i=0;i<data.length;i+=4)
    {
        var r=data[i+0];
        var g=data[i+1];
        var b=data[i+2];
        data[i+0]=r*0.39+g*0.76+b*0.18;
        data[i+1]=r*0.35+g*0.68+b*0.16;
        data[i+2]=r*0.27+g*0.53+b*0.13;
    } 

单色蒙版

  主要指将每个像素的r、g、b平均值赋予某个通道，其它两个通道值赋0。示例代码以红绿蓝单色蒙版效果如下所示：

	for(var i=0;i<data.length;i+=4)
    {
        var r=data[i+0];
        var g=data[i+1];
        var b=data[i+2];
        var average=(r+g+b)/3;
        data[i+0]=average;
        data[i+1]=0;
        data[i+2]=0;
    } 

透明处理

  主要是调整每个像素中的透明度，示例代码及图片如下所示：

 	for(var i=0;i<data.length;i+=4)
     {                    
         data[i+3]=data[i+3]*0.3;
     } 

浮雕效果

  主要是操作当前像素与邻近像素的r、g、b值，本文根据参考文献中的C#代码改成的JavaScript代码。示例代码及图片如下所示：

	  for(var i=0;i<data.length-4;i+=4)
      {
          var r1=data[i+0];
          var g1=data[i+1];
          var b1=data[i+2];
          var r2=data[i+4];
          var g2=data[i+5];
          var b2=data[i+6];
                                      
          var r = Math.abs(g1 - g2 + 128);                             
          var g = Math.abs(g1 - g2 + 128);                             
          var b = Math.abs(b1 - b2 + 128);                             
          if (r > 255)                                 
              r = 255;                             
          if (r < 0)                                 
              r = 0;                             
          if (g > 255)                                 
              g = 255;                             
          if (g < 0)                                 
              g = 0;                             
          if (b > 255)                                 
              b = 255;                             
          if (b < 0)                                 
              b = 0;    
              
          data[i+0]=r;
          data[i+1]=g;
          data[i+2]=b;
      } 

  图片像素的处理方式有很多，本文主要跟基于参考文献演示了其中比较简单的几种效果，有兴趣的朋友可以再去实验更复杂的效果。网上应该也有很多成熟的JavaScript图片操作库可以直接使用。

原文地址：
[1]图片地址：https://m.sohu.com/a/239776224_666417
[2]从0到1 HTML5 Canvas动画开发
[3]https://blog.csdn.net/mochong/article/details/84055015?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=1328575.184.16146071539985545&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control
[4]https://www.cnblogs.com/jameslong/p/3805993.html
[5]https://blog.csdn.net/chdjj/article/details/19568857
[6]https://www.cnblogs.com/mq0036/p/4026057.html
[7]https://blog.csdn.net/weixin_34319817/article/details/94711204