Canvas中getImageData与putImageData配合手动遍历像素是实现自定义卷积滤镜最直接可靠的方式，核心是对每个像素应用卷积核加权求和，并正确处理边界与归一化。
Canvas 的 getImageData 和 putImageData 配合手动遍历像素，是实现自定义卷积滤镜（如模糊、锐化、边缘检测）最直接可靠的方式。核心在于对每个像素应用卷积核加权求和，并正确处理边界与归一化。
获取图像数据并遍历像素
先用 drawImage 将图片绘制到 canvas 上，再调用 ctx.getImageData(0, 0, width, height) 获取 RGBA 像素数组（data 是一维 Uint8ClampedArray，每 4 个元素代表一个像素的 R、G、B、A）。遍历时跳过 Alpha 通道（或根据需求保留），对每个中心像素 (x, y)，在邻域内按卷积核权重累加周围像素值。
- 注意：索引计算为
idx = (y * width + x) * 4，对应 R 通道位置；G/B/A 分别为idx+1、idx+2、idx+3 - 避免修改原
data数组——需创建新数组或使用临时缓冲区，防止边遍历边覆盖影响后续计算
实现卷积运算与边界处理
给定一个 n×n 卷积核（如 3×3 锐化核 [[0,-1,0],[-1,5,-1],[0,-1,0]]），对每个像素 (x,y)，需遍历核中每个偏移 (kx, ky)，计算邻点坐标 nx = x + kx - pad、ny = y + ky - pad（pad = (n-1)/2）。超出画布范围时可选择：
- 忽略（裁剪）：跳过该邻点，适合快速预览
-
复制边缘：取最近的有效像素，代码中用
Math.max(0, Math.min(width-1, nx))等约束坐标 - 镜像/循环：较少用于滤镜，但可扩展支持
归一化、偏移与颜色通道独立处理
卷积结果常需归一化（除以核元素和）或加偏移（如亮度调整）。例如高斯模糊核各元素和为 1，可直接累加；而边缘检测核（如 Sobel）和为 0，需取绝对值后加 128 再截断到 [0,255]。R/G/B 三通道必须分别卷积，不可混合计算。Alpha 通道通常保持不变（除非做透明度滤镜）。
立即学习“前端免费学习笔记（深入）”；
- 输出值要
Math.max(0, Math.min(255, Math.round(value)))截断，避免溢出 - 若核和为 0（如拉普拉斯），需额外加 bias（如 128）再 clamp，否则全黑
- 性能敏感时可用
Float32Array做中间计算，最后转回 Uint8ClampedArray
封装成可复用函数
把核矩阵、是否归一化、边界模式作为参数，返回处理后的 ImageData。例如：
function applyConvolution(imageData, kernel, normalize = true, border = 'clamp') { ... }调用时传入预设核即可切换效果：applyConvolution(imgData, [[0,1,0],[1,-4,1],[0,1,0]]) 实现简单拉普拉斯边缘增强。
