Canvas 10款基础滤镜（原理篇）

—\ntheme: smartblue\n—\n# 本文简介\n\n点赞 + 关注 + 收藏 = 学会了\n\n

\n\n在学习 Canvas 的路上大概率会了解到 滤镜 ，这是个很有趣的东西。\n\n用 Canvas 开发滤镜需要对几何数学、颜色的理解等领域都有一定基础。\n\n但先别关掉文章，没基础也没关系，不是还可以复制粘贴吗？（像极了正则表达式）\n\n

\n\n我在学习的过程中也尝试过写一些简单的滤镜，也收集过很多滤镜。但由于历史有点久远了，我找不到收集回来的滤镜出处了。如果有冒犯到原作者，请联系我进行整改~\n\n

\n\n如果你对 Canvas 感兴趣，可以关注《一看就懂的 Canvas 专栏》\n\n

\n\n本文使用到的猫咪图片素材来自 The Cat API。\n\n如果想要更多猫猫狗狗的API，可以查看 《前端需要的免费在线api接口》 。\n\n

\n\n

\n\n# 开发环境\n\n本文所列出的例子都是在 .html 文件里编写的，可以直接看看代码仓库。\n\n需要注意的是，本例使用到的方法虽然是 Canvas 原生操作像素的方法，但必须有个服务器才能运行起来，不然不会生效。\n\n

\n\n可以搭建本地服务器运行本文案例，方法有很多种。\n\n比如你使用 Vue 或者 React 的脚手架搭建的项目，运行后就能跑起本文所有案例。\n\n又或者使用 http-server 启动本地服务。\n\n

\n\n本文使用一个更简单的工具。我用 VS Code 开发，安装了 Live Server 插件，它可以启动一个本地服务，同时自带热更新功能。\n\n

\n\n开发环境方面就讲这么多，不是本文重点。如果是在不懂怎么搭建环境可以在留言区提问~\n\n

\n\n

\n\n# 滤镜原理\n\n众所周知，位图是由像素组成，像素是位图最小的信息单元。 你可以把日常看到大多数图片理解成由一个个点组成的图像。\n\n滤镜的作用是通过具体规则，将图像中的像素点按照计算得出的公式修改一遍再重新渲染出来。\n\n\n

\n\n比如这样，将左侧的黑猫照片反色，原本白色的像素变成黑色，原本是黑色的像素变成白色。 而这就是具体规则。\n\n

\n\n滤镜就是操作像素点，在 Canvas 里有3个常用的 API 可以完成像素点的操作。\n\n它们分别是：\n\n- getImageData()\n- putImageData()\n- createImageData()\n\n

\n\n## getImageData()\n\ngetImageData() 方法可以获取图片的数据。比如组成图片的像素集、图片的宽高等信息。\n\n语法：\n\njs\ncontext.getImageData(x, y, width, height)\n\n\n- x: 开始复制的左上角位置的 x 坐标。\n- y: 开始复制的左上角位置的 y 坐标。\n- width: 将要复制的矩形区域的宽度。\n- height: 将要复制的矩形区域的高度。\n\n

\n\n举个例子，我使用这张猫图，在 Canvas 中渲染出来。然后使用 getImageData() 方法获取该图片的数据（为了展示方便，我在开发中使用的猫图是压缩过尺寸的）。\n\n\n

\n\n

\n\nhtml\n<canvas id="c" width="700" height="320" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const cxt = context.getContext(&#39;2d&#39;)\n\n const img = new Image() // 创建图片对象\n img.src = &#39;./cat.jpg&#39; // 加载本地图片\n\n // 等待图片加载完成再往下执行\n img.onload = () => {\n // 渲染图片\n cxt.drawImage(img, 10, 10)\n\n // 获取图片信息\n const imgData = cxt.getImageData(10, 10, img.width, img.height)\n\n // 打印图片信息\n console.log(imgData)\n }\n</script>\n\n\n

\n\n\n

\n\n打印出来的信息可以点开大图看看\n\n- data: 图片像素数据集，以数组的形式存放，这是本文要讲的重点，需要关注！\n- colorSpace: 图片使用的色彩标准，这个属性在 Chrome 里有打印出来，Firefox 里没打印。不重要~\n- height: 图片高度\n- width: 图片宽度\n\n

\n\n通过 getImageData() 获取到的信息中，需要重点关注的是 data ，它是一个一维数组，仔细观察发现里面的值没一个是大于255的，也不会小于0。\n\n\n

\n\n其实 data 属性里记录了图片每个像素的 rgba 值分别是多少。\n\n- r 代表红色\n- g 代表绿色\n- b 代表蓝色\n- a 透明度\n\n

\n\n这个和 CSS 里的 rgba 是同一个意思。\n\ndata 里，4个元素记录1个像素的信息。也就是说，1个像素是由 r**、**g**、**b**、**a 4个元素组成。而且每个元素的取值范围是 0 - 255 的整数。\n\n\ndata: [r1, g1, b1, a1, r2, g2, b2, a2, ......]\n\n\n| 像素点 | 值 | 颜色通道 |\n| ——————- | —- | ——– |\n| imgData.data[0] | 49 | 红色 r |\n| imgData.data[1] | 47 | 绿色 g |\n| imgData.data[2] | 51 | 蓝色 b |\n| imgData.data[3] | 255 | 透明度 a |\n| …… | …… | …… |\n| imgData.data[n-4] | 206 | 红色 r |\n| imgData.data[n-2] | 200 | 绿色 g |\n| imgData.data[n-3] | 200 | 蓝色 b |\n| imgData.data[n-1] | 255 | 透明度 a |\n\n

\n\n如果一张图只有10个像素，通过 getImageData() 获取到的 data 信息中就有40个元素。\n\n

\n\n所以说，在 Canvas 中开发滤镜就是操作像素，也就是操作 data 里的数据。比如想把图片的透明度设为 50%，只需要遍历一遍 data ，把 下标 + 1 能被4整除的元素的值改成 128 ，然后通过 putImageData() 方法将图片数据输出到画布上就行了。\n\n

\n\n## putImageData()\n\nputImageData() 可以将 ImageData 对象的数据（图片像素数据）绘制到画布上。\n\n语法：\n\njs\nputImageData(imageData, x, y)\n\n// 或者\ncontext.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)\n\n\n- imageData: 规定要放回画布的 ImageData 对象\n- x: ImageData 对象左上角的 x 坐标，以像素计\n- y: ImageData 对象左上角的 y 坐标，以像素计\n- dirtyX: 可选。水平值（x），以像素计，在画布上放置图像的位置\n- dirtyY: 可选。水平值（y），以像素计，在画布上放置图像的位置\n- dirtyWidth: 可选。在画布上绘制图像所使用的宽度\n- dirtyHeight: 可选。在画布上绘制图像所使用的高度\n\n

\n\n比如，我要将图片复制到另一个位置\n\n\n

\n\nhtml\n<canvas id="c" width="700" height="320" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const ctx = context.getContext(&#39;2d&#39;)\n\n const img = new Image()\n img.src = &#39;../cat.jpg&#39;\n\n img.onload = () => {\n ctx.drawImage(img, 0, 0)\n\n const imgData = ctx.getImageData(0, 0, img.width, img.height)\n ctx.putImageData(imgData, 100, 100) // 将图片对象输出到 (100, 100) 的位置上\n }\n</script>\n\n\n

\n\nputImageData() 通常会和 getImageData() 一起配合使用。\n\n

\n\n## createImageData()\n\ncreateImageData() 方法创建新的空白 ImageData 对象\n\n语法：\n\njs\n// 以指定的尺寸（以像素计）创建新的 ImageData 对象\ncontext.createImageData(width, height)\n\n// 或者\n// 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）\ncontext.createImageData(imageData)\n\n\n

\n\n

\n\n上面几个 API 只是看语法和介绍可能还不是很明了，直接看案例会学得比较快。\n\n先从最简单的开始~\n\n

\n\n

\n\n# 反色\n\n一个像素由 rgba 4个元素组成，在反色效果中，不需要修改 a ，因为它负责不透明度。\n\n而 rgb 如果都是 255 ，就是白色，如果都是 0 就是黑色。\n\n反色的原理就是用 255 减去原来的值。也就是说红、绿、蓝各自取反。\n\n比如 rgb(10, 200, 100) ，那么反色就是 rgb(245, 55, 155)。\n\n

\n\n\n

\n\nhtml\n<canvas id="c" width="700" height="320" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const ctx = context.getContext(&#39;2d&#39;)\n\n const img = new Image()\n img.src = &#39;../cat.jpg&#39;\n\n img.onload = () => {\n ctx.drawImage(img, 10, 10)\n\n const imgData = ctx.getImageData(10, 10, img.width, img.height)\n\n const data = imgData.data\n\n for (var i = 0; i < data.length; i += 4) {\n data[i + 0] = 255 - data[i + 0] // r，红通道\n data[i + 1] = 255 - data[i + 1] // g，绿通道\n data[i + 2] = 255 - data[i + 2] // b，蓝通道\n }\n\n ctx.putImageData(imgData, 340, 10)\n }\n</script>\n\n\n上面只操作 data[i + 0]、 data[i + 1] 和 data[i + 2]，就是每个像素的 rgb ，并没有操作透明通道。\n\n所以反色之后，不透明度和原本是一样的。\n\n

\n\n当把所有像素都操作完成后，再使用 putImageData() 方法把数据渲染到指定位置上。\n\n

\n\n

\n\n# 灰度\n\n使用 加权平均值 的方式可以计算出一个好看的灰度照片。\n\n

\n\n

\n\nhtml\n<canvas id="c" width="700" height="320" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const ctx = context.getContext(&#39;2d&#39;)\n\n const img = new Image()\n img.src = &#39;../cat.jpg&#39;\n\n img.onload = () => {\n ctx.drawImage(img, 10, 10)\n\n const imgData = ctx.getImageData(10, 10, img.width, img.height)\n\n const data = imgData.data\n\n for (var i = 0; i < data.length; i += 4) {\n const grayscale = data[i] * 0.3 + data[i + 1] * 0.6 + data[i + 2] * 0.1\n data[i + 0] = grayscale // r，红通道\n data[i + 1] = grayscale // g，绿通道\n data[i + 2] = grayscale // b，蓝通道\n }\n\n ctx.putImageData(imgData, 340, 10)\n }\n</script>\n\n\n

\n\n

\n\n# 黑白\n\n将每个像素的 rgb 都相加起来，再除以 3 。判断一下是否大于 128 ，如果大于的话，直接取白色（255）；小于的话就取黑色（0）。\n\n因为每个通道的取值范围是 0 ~ 255，取中间值来判断，就使用了 128 做判断值。\n\n

\n\n\n

\n\nhtml\n<canvas id="c" width="700" height="320" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const ctx = context.getContext(&#39;2d&#39;)\n\n const img = new Image()\n img.src = &#39;../cat.jpg&#39;\n\n img.onload = () => {\n ctx.drawImage(img, 10, 10)\n\n const imgData = ctx.getImageData(10, 10, img.width, img.height)\n\n const data = imgData.data\n\n for (var i = 0; i < data.length; i += 4) {\n const r = data[i + 0]\n const g = data[i + 1]\n const b = data[i + 2]\n const avg = (r + g + b) / 3\n data[i + 0] = data[i + 1] = data[i + 2] = avg >= 128 ? 255 : 0\n }\n\n ctx.putImageData(imgData, 340, 10)\n }\n</script>\n\n\n

\n\n

\n\n# 亮度调节\n\n如果需要调亮，就把 rgb 每个值往上调；如果要调暗，就往下调。\n\n

\n\n## 调亮\n\n\n

\n\nhtml\n<canvas id="c" width="700" height="320" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const ctx = context.getContext(&#39;2d&#39;)\n\n const img = new Image()\n img.src = &#39;../cat.jpg&#39;\n\n img.onload = () => {\n ctx.drawImage(img, 10, 10)\n\n const imgData = ctx.getImageData(10, 10, img.width, img.height)\n\n const data = imgData.data\n\n let luminance = 60 // 调节参数\n\n for (var i = 0; i < data.length; i += 4) {\n data[i + 0] += luminance // r，红通道\n data[i + 1] += luminance // g，绿通道\n data[i + 2] += luminance // b，蓝通道\n }\n\n ctx.putImageData(imgData, 340, 10)\n }\n</script>\n\n\n

\n\n## 调暗\n\n\n

\n\nhtml\n<canvas id="c" width="700" height="320" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const ctx = context.getContext(&#39;2d&#39;)\n\n const img = new Image()\n img.src = &#39;../cat.jpg&#39;\n\n img.onload = () => {\n ctx.drawImage(img, 10, 10)\n\n const imgData = ctx.getImageData(10, 10, img.width, img.height)\n\n const data = imgData.data\n\n let luminance = 60 // 调节参数\n\n for (var i = 0; i < data.length; i += 4) {\n data[i + 0] -= luminance // r，红通道\n data[i + 1] -= luminance // g，绿通道\n data[i + 2] -= luminance // b，蓝通道\n }\n\n ctx.putImageData(imgData, 340, 10)\n }\n</script>\n\n\n

\n\n

\n\n# 调节RGB通道\n\n其实和上一例差不多，先设置一个调节参数。如果只是想调红通道，那就让红通道和这个参数相加或者相减。\n\n

\n\n\n

\n\nhtml\n<canvas id="c" width="1000" height="700" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const ctx = context.getContext(&#39;2d&#39;)\n\n const img = new Image()\n img.src = &#39;../cat.jpg&#39;\n\n img.onload = () => {\n ctx.drawImage(img, 10, 10)\n\n const imgData = ctx.getImageData(10, 10, img.width, img.height)\n\n let arg = 80 // 调节参数\n\n // r 红通道\n const r = ctx.createImageData(imgData)\n r.data.set(imgData.data)\n const rData = r.data\n\n for (var i = 0; i < rData.length; i += 4) {\n rData[i + 0] += arg // r，红通道\n }\n\n ctx.putImageData(r, 10, img.height + 30)\n\n // g 绿通道\n const g = ctx.createImageData(imgData)\n g.data.set(imgData.data)\n const gData = g.data\n\n for (var i = 0; i < gData.length; i += 4) {\n gData[i + 1] += arg // g，绿通道\n }\n\n ctx.putImageData(g, 340, img.height + 30)\n\n // b 蓝通道\n const b = ctx.createImageData(imgData)\n b.data.set(imgData.data)\n const bData = b.data\n\n for (var i = 0; i < bData.length; i += 4) {\n bData[i + 2] += arg // b，蓝通道\n }\n\n ctx.putImageData(b, 670, img.height + 30)\n }\n</script>\n\n\n

\n\n

\n\n# 调节透明度\n\n有了前面的例子，现在要调节图像透明度那实在太简单了。\n\n只需把 a 通道的值减去一个调节参数即可。\n\n

\n\n\n

\n\nhtml\n<canvas id="c" width="700" height="320" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const ctx = context.getContext(&#39;2d&#39;)\n\n const img = new Image()\n img.src = &#39;../cat.jpg&#39;\n\n img.onload = () => {\n ctx.drawImage(img, 10, 10)\n\n const imgData = ctx.getImageData(10, 10, img.width, img.height)\n\n const data = imgData.data\n\n let luminance = 60 // 调节参数\n\n for (var i = 0; i < data.length; i += 4) {\n data[i + 3] -= 100 // a通道，设置不透明度\n }\n\n ctx.putImageData(imgData, 340, 10)\n }\n</script>\n\n\n

\n\n

\n\n# RGB蒙版\n\n蒙版的逻辑和前面的 调节RGB通道 有点像。\n\n这里使用的公式是，如果要做红色蒙版，首先求 rgb 3个通道的平均值，将平均值赋给红通道（r），最后将绿和蓝通道设置为0。\n\n

\n\n\n

\n\nhtml\n<canvas id="c" width="1000" height="700" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const ctx = context.getContext(&#39;2d&#39;)\n\n const img = new Image()\n img.src = &#39;../cat.jpg&#39;\n\n img.onload = () => {\n ctx.drawImage(img, 10, 10)\n\n const imgData = ctx.getImageData(10, 10, img.width, img.height)\n\n let arg = 80 // 调节参数\n\n // r 红通道\n const r = ctx.createImageData(imgData)\n r.data.set(imgData.data)\n const rData = r.data\n\n for (var i = 0; i < rData.length; i += 4) {\n const r = rData[i + 0]\n const g = rData[i + 1]\n const b = rData[i + 2]\n const avg = (r + g + b) / 3\n rData[i + 0] = avg\n rData[i + 1] = 0\n rData[i + 2] = 0\n }\n\n ctx.putImageData(r, 10, img.height + 30)\n\n // g 绿通道\n const g = ctx.createImageData(imgData)\n g.data.set(imgData.data)\n const gData = g.data\n\n for (var i = 0; i < gData.length; i += 4) {\n const r = gData[i + 0]\n const g = gData[i + 1]\n const b = gData[i + 2]\n const avg = (r + g + b) / 3\n gData[i + 0] = 0\n gData[i + 1] = avg\n gData[i + 2] = 0\n }\n\n ctx.putImageData(g, 340, img.height + 30)\n\n // b 蓝通道\n const b = ctx.createImageData(imgData)\n b.data.set(imgData.data)\n const bData = b.data\n\n for (var i = 0; i < bData.length; i += 4) {\n const r = bData[i + 0]\n const g = bData[i + 1]\n const b = bData[i + 2]\n const avg = (r + g + b) / 3\n bData[i + 0] = 0\n bData[i + 1] = 0\n bData[i + 2] = avg\n }\n\n ctx.putImageData(b, 670, img.height + 30)\n }\n</script>\n\n\n

\n\n

\n\n# 老照片滤镜\n\n老照片效果是有点偏黄的黑白灰照片，红 + 绿 = 黄。\n\n通过调节，我得出以下代码\n\n

\n\n\n

\n\nhtml\n<canvas id="c" width="700" height="320" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const ctx = context.getContext(&#39;2d&#39;)\n\n const img = new Image()\n img.src = &#39;../cat.jpg&#39;\n\n img.onload = () => {\n ctx.drawImage(img, 10, 10)\n\n const imgData = ctx.getImageData(10, 10, img.width, img.height)\n\n const data = imgData.data\n\n for (var i = 0; i < data.length; i += 4) {\n const r = data[i + 0]\n const g = data[i + 1]\n const b = data[i + 2]\n\n data[i + 0] = r * 0.28 + g * 0.72 + b * 0.22\n data[i + 1] = r * 0.25 + g * 0.63 + b * 0.13\n data[i + 2] = r * 0.17 + g * 0.66 + b * 0.13\n }\n\n ctx.putImageData(imgData, 340, 10)\n }\n</script>\n\n\n

\n\n

\n\n# 模糊\n\n让图片模糊的方法是，当前像素的值，取决于周围8个像素的平均值（某些情况没有8个那么多，比如像素在图像的边缘）。将平均值赋给当前正在操作的像素，就可以得到一个和周边像素比较接近的过渡颜色。\n\n其原理比较复杂，我打算开多一篇文章讲解~\n\n

\n\n\n

\n\nhtml\n<canvas id="c" width="700" height="320" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const ctx = context.getContext(&#39;2d&#39;)\n\n const img = new Image()\n img.src = &#39;../cat.jpg&#39;\n\n img.onload = () => {\n ctx.drawImage(img, 10, 10)\n\n const imgData = ctx.getImageData(10, 10, img.width, img.height)\n\n const data = imgData.data\n const width = imgData.width\n const height = imgData.height\n\n const gaussMatrix = []\n\n let gaussSum = 0\n let x = 0\n let y = 0\n\n let i = 0\n let j = 0\n let k = 0\n let len = 0\n\n const radius = 10\n const sigma = 5\n\n let r = 0\n let g = 0\n let b = -1 / (2 * sigma * sigma)\n let a = 1 / (Math.sqrt(2 * Math.PI) * sigma)\n\n // 生成高斯矩阵\n for (i = 0, x = -radius; x <= radius; x++, i++) {\n g = a * Math.exp(b * x * x)\n gaussMatrix[i] = g\n gaussSum += g\n }\n\n // 归一化, 保证高斯矩阵的值在[0,1]之间\n for (i = 0, len = gaussMatrix.length; i < len; i++) {\n gaussMatrix[i] /= gaussSum\n }\n\n // x 方向一维高斯运算\n for (y = 0; y < height; y++) {\n for (x = 0; x < width; x++) {\n r = g = b = a = 0\n gaussSum = 0\n for (j = -radius; j <= radius; j++) {\n k = x + j\n if (k >= 0 &amp;&amp; k < width) { // 确保 k 没超出 x 的范围\n // r,g,b,a 四个一组\n i = (y * width + k) * 4\n r += data[i] * gaussMatrix[j + radius]\n g += data[i + 1] * gaussMatrix[j + radius]\n b += data[i + 2] * gaussMatrix[j + radius]\n gaussSum += gaussMatrix[j + radius]\n }\n }\n i = (y * width + x) * 4\n // 除以 gaussSum 是为了消除处于边缘的像素, 高斯运算不足的问题\n // console.log(gaussSum)\n data[i] = r / gaussSum\n data[i + 1] = g / gaussSum\n data[i + 2] = b / gaussSum\n }\n }\n\n // y 方向一维高斯运算\n for (x = 0; x < width; x++) {\n for (y = 0; y < height; y++) {\n r = g = b = a = 0\n gaussSum = 0\n for (j = -radius; j <= radius; j++) {\n k = y + j\n if (k >= 0 &amp;&amp; k < height) { // 确保 k 没超出 y 的范围\n i = (k * width + x) * 4\n r += data[i] * gaussMatrix[j + radius]\n g += data[i + 1] * gaussMatrix[j + radius]\n b += data[i + 2] * gaussMatrix[j + radius]\n gaussSum += gaussMatrix[j + radius]\n }\n }\n i = (y * width + x) * 4\n data[i] = r / gaussSum\n data[i + 1] = g / gaussSum\n data[i + 2] = b / gaussSum\n }\n }\n\n ctx.putImageData(imgData, 340, 10)\n }\n</script>\n\n\n

\n\n

\n\n# 马赛克\n\n马赛克的原理是：先定义一个马赛克范围参数，该参数越大，马赛克的格子就越大。通过该参数去到当前正在操作的像素的四周像素，并将这些像素的颜色值求出一个平均值，然后该像素四周的像素都使用求出来的颜色值。\n\n其原理也是比较复杂，不是一两百字能表达完。我同样打算写多一篇文章讲解~\n\n

\n\n\n

\n\nhtml\n<canvas id="c" width="700" height="320" style="border: 1px solid #ccc;"></canvas>\n\n<script>\n const context = document.getElementById(&#39;c&#39;)\n const ctx = context.getContext(&#39;2d&#39;)\n\n const img = new Image()\n img.src = &#39;../cat.jpg&#39;\n\n img.onload = () => {\n ctx.drawImage(img, 10, 10)\n\n const imgData = ctx.getImageData(10, 10, img.width, img.height)\n\n const data = imgData.data\n const blur = 6 // 马赛克范围\n const blurR = 2 * blur + 1\n const total = blurR * blurR\n\n for (let i = blur; i <= img.width; i = i + blurR) {\n for (let j = blur; j <= img.height; j = j + blurR) {\n let r = 0\n let g = 0\n let b = 0\n for (let leny = -blur; leny <= blur; leny++) {\n for (let lenx = -blur; lenx <= blur; lenx++) {\n r += data[4 * ((j + leny) * img.width + i + lenx) + 0]\n g += data[4 * ((j + leny) * img.width + i + lenx) + 1]\n b += data[4 * ((j + leny) * img.width + i + lenx) + 2]\n }\n }\n\n let vr = r / total\n let vg = g / total\n let vb = b / total\n for (let leny = -blur; leny <= blur; leny++) {\n for (let lenx = -blur; lenx <= blur; lenx++) {\n data[4 * ((j + leny) * img.width + i + lenx) + 0] = vr\n data[4 * ((j + leny) * img.width + i + lenx) + 1] = vg\n data[4 * ((j + leny) * img.width + i + lenx) + 2] = vb\n }\n }\n }\n }\n\n ctx.putImageData(imgData, imgData.width + 30, 10)\n }\n</script>\n\n\n

\n\n

\n\n# 总结\n\n开发 Canvas 滤镜其实就是定义好滤镜规则，再推算出算法去操作像素。\n\n

\n\n上面的例子中，模糊和马赛克的嵌套循环是比较多的。如果图片较大时可能会出现卡机的情况。\n\n要解决这个问题可以优化算法减少遍历，又或者将图像处理的任务交给工作线程来做。\n\n优化算法减少遍历，对我来说是有点难度的，所以我选择使用工作线程来处理图像，之后的文章会讲到

\