准备工作首先，我们在Canvas上绘制图像。为了简单起见，图片的大小固定为300x300。(“画布”).getContext(“2d”);//创建图像对象varimg=newImage();img.src=require(“./seal.png”);//图片加载完成后显示在画布上img.onload=()=>{ctx.drawImage(img,0,0);this.imgData=ctx.getImageData(0,0,300,300);};(js)2.操作像素熟悉Canvas的应该知道，上面的this.imgData其实是ImageData类的一个实例，其中imgData.data是一个Uint8ClampedArray，描述了一个包含RGBA顺序数据的一维数组，数据由0到255（含）之间的整数表示。简单的说就是图片像素信息，每四位代表一个像素单元。四位信息中的每一位都是RGBA。也就是说，第一个Bit标记为R，第二个Bit代表G，第三个Bit代表B，第四个Bit代表A，第五个Bit又是R...，等等。接下来我们将操作imgData来实现滤镜的效果。为了简单起见，我对超过200的值进行了一个增加亮度的操作。其实无论这个值是200还是其他数字，我们都需要成为“调参工程师”继续实验。并且对RGB强行使用相同的逻辑是不合理的。更合理的做法是分别测量RGB阈值。由于麻烦，我这里没有实现。但如果对效果要求高的话，最好单独测量。在日常开发中，我们可能还会遇到很多其他的滤镜效果。下面是一些比较常见的效果。如果你碰巧用到它，不妨作为参考。如果遇到新的滤镜效果，不妨在文末给我留言，我看到后会及时回复。预先感谢您的参与。其他四种滤镜效果如下所述。这里只贴出核心代码，完整代码可以访问我的GithubRepo查看。如果觉得本地下载麻烦，也可以在这里在线安装访问，打开这个链接，分别执行yarn和yarnstart。以下效果均来自下图原图：3.如何实现黑白效果for(leti=0;i
