Canvas操作图片像素（续）

  上一篇文章《Canvas操作图片像素》中介绍了如何在Canvas中操作像素。文章主要说了每种图片效果的实现原理。
  为了更好的展示效果，本文整理上一篇文章中的JavaScript代码，形成独立的图片操作JavaScript文件，然后通过选中不同的图片处理效果来调用相应的处理功能进行图片处理。
  首先是页面布局，由于目前html学的一般,所以弄了一个最简单的布局，将图片效果、灰度算法、图片通道列于图片上方，然后在下方显示图片原始图形及处理后的图形。
  然后是将之前嵌在网页内的图片像素处理代码剥离出来放在单独的JavaScript文件中，根据选择的图片效果、灰度算法、图片通道对图片进行处理并显示处理结果。
  程序比较简单，需要注意的有以下几点：

• 1、使用selected设置下拉框的默认选项，同时使用onchange事件处理下拉框值发生变化；

	<select id="channelColor" name="grayOpt" onchange="InvokeImageOpt(4)">
        <option selected>红</option>
        <option >绿</option>
        <option >蓝</option>
    </select>

• 2、灰度算法和通道主要是在黑白效果和蒙版效果中使用，其它效果中可用不考虑这两个选项值，因此它们两个的onchange事件没有直接调用图片像素处理函数，而是封了以下，判断了一下图片效果是否是跟它们相关的图片效果；

	function InvokeImageOpt(effectIndex)
     {
         var effect = document.getElementById("imageEffect");
         if(effect.selectedIndex==effectIndex)
         {
             PixelOperationFunc();
         }
     }

• 3、在网页的onload事件中，除了加载和显示原始图片，在原始图片显示之后，还根据图片效果、灰度算法、图片通道选项的默认值对图片进行了处理，避免页面加载完成后页面上显示的内容不一致。

	window.onload = function()
    {  
        var cnv = document.getElementById("canvas");
        var cxt=cnv.getContext("2d");

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

        image.onload= function(             )
        {
            cxt.drawImage(image,0,0,cnv.clientWidth,cnv.clientHeight); 
            PixelOperationFunc();
        }
    }

  页面效果如下图所示，程序源代码放在了GitHub上面，地址为：https://github.com/guochao2299/PixelOperation。后续还会对该代码进行改进。

参考文献：
[1]https://www.feiniaomy.com/post/437.html
[2]https://www.cnblogs.com/zhengyuan1314/p/7003047.html
[3]https://www.w3school.com.cn/tags/event_onclick.asp
[4]https://blog.csdn.net/qq_37117258/article/details/100551443