卷积就是如此神奇😂
在 canvas 中实现卷积处理
以下是一个 JavaScript 对 canvas 输出的 ImageData 进行卷积的实例：
| /* * 参数中的 kernel 就是卷积核方阵，不过顺着排列成了一个九位的数组 * 像是这样 [-1, -1, -1, -1, 8, -1, -1, -1, -1] * offset 对RGBA数值直接增加，表现为提高亮度 * 下面的for循环 * y 代表行，x 代表列，c 代表RGBA */ convolutionMatrix(input, kernel, offset = 0) { let ctx = this.outputCtx let output = ctx.createImageData(input) let w = input.width, h = input.height let iD = input.data, oD = output.data for (let y = 1; y < h - 1; y += 1) { for (let x = 1; x < w - 1; x += 1) { for (let c = 0; c < 3; c += 1) { let i = (y * w + x) * 4 + c oD[i] = offset + (kernel[0] * iD[i - w * 4 - 4] + kernel[1] * iD[i - w * 4] + kernel[2] * iD[i - w * 4 + 4] + kernel[3] * iD[i - 4] + kernel[4] * iD[i] + kernel[5] * iD[i + 4] + kernel[6] * iD[i + w * 4 - 4] + kernel[7] * iD[i + w * 4] + kernel[8] * iD[i + w * 4 + 4]) / this.divisor } oD[(y * w + x) * 4 + 3] = 255 } } ctx.putImageData(output, 0, 0) } |
成品代码:https://github.com/ssshooter/canvas-img-process
测试网址，附带彩蛋嘻嘻嘻😘https://ssshooter.github.io/canvas-img-process/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易采站长站。
