HTML5 Canvas图像锐化与边缘提取均基于3×3卷积核的像素级加权计算，区别仅在于核数值设计：锐化核（如[0,-1,0;-1,5,-1;0,-1,0]）整体和为1以增强对比，边缘核（如[-1,-1,-1;-1,8,-1;-1,-1,-1]）整体和接近0以突出轮廓，需注意边界处理、透明跳过、sRGB非线性及性能优化。
HTML5 Canvas 实现图像锐化与边缘提取，核心不是加个滤镜，而是用数学卷积在像素层面“重新算一遍颜色”。两者共享同一套底层机制：3×3 卷积核 + 像素邻域加权计算，区别只在于核的数值设计和用途目标。
卷积是基础操作，不是特效开关
Canvas 本身不提供“锐化”或“边缘”按钮。所有效果都来自手动遍历每个像素，读取它周围 8 个邻居（3×3 区域），按固定权重相加再写回。这个权重矩阵就是卷积核——它决定了你是想突出细节（锐化）、标出轮廓（边缘），还是模糊一片（均值）。
- 卷积核必须是 3×3 或 5×5 这类奇数尺寸，才有明确的“中心像素”可定位
- 每个像素处理时，都要算 9 次乘加（3×3），R/G/B 三通道分开算，A 通道通常跳过或单独处理
- 索引不能靠猜：某点 (x, y) 的 R 值位置是 (y × width + x) × 4，G 是 +1，B 是 +2，A 是 +3
- 绝对不要边读边改原数组——得用新 Uint8ClampedArray 存结果，否则后序像素会读到已被覆盖的中间值
锐化核与边缘核的本质差异
锐化让边缘更“跳”，边缘提取则把边缘单独“拎出来”。它们的核看起来像，但设计逻辑相反：
- 锐化核（如 [0,-1,0; -1,5,-1; 0,-1,0]）：中心权重为正且大于周边负值之和，整体和为 1，目的是增强对比，不改变整体亮度
- 边缘核（如 [-1,-1,-1; -1,8,-1; -1,-1,-1]）：中心为大正数，周围全负，整体和接近 0，输出值集中在边缘区域，其余趋近黑色
- 实际中，边缘图常需后续归一化或阈值二值化，否则灰度值太低看不清；锐化图则常要防亮部过冲，可加小量亮度补偿（如减 5～10）
绕不开的工程细节
写对公式只是第一步，真正在浏览器跑起来，还得扛住边界、透明、性能和色彩这四道坎：
立即学习“前端免费学习笔记（深入）”；
- 边界怎么填：左/上/右/下边缘没有完整 3×3 邻域，推荐用“复制边缘”（nx = Math.max(0, Math.min(width-1, x + dx))），比直接跳过更自然
- 透明像素要跳过：alpha 为 0 的点不参与计算，否则锐化会把半透明边缘“拉花”，造成色边污染
- 别硬扛大图：1024×768 图片单次锐化约 230 万次运算，中低端手机卡顿是常态；先 drawImage 缩到 50%，处理完再放大，视觉影响小，耗时降为 1/4
- sRGB 不是线性空间：Canvas 默认按 sRGB 解释像素，但卷积在非线性域做加减，易致亮部发白、暗部噪点放大；多数场景可忽略，但对专业输出建议预转线性光（Math.pow(r/255, 2.2)）再处理
性能优化不是可选项
主线程卡住页面就卡住，尤其移动端。实时锐化必须做分层处理：
- 小于 100 万像素（如 1000×800），纯 JS 处理够用；超过 200 万，Web Worker 才显价值
- Worker 传数据别传整个 ImageData，只 transfer data.buffer，再用 new Uint8ClampedArray(view.buffer) 复用内存
- 分块策略推荐按行切（如每 200 行一组），避免跨块边界计算错误；合并时用 set() 写回原 imageData.data 对应位置
- requestAnimationFrame 里反复调用锐化？别这么做。一次处理完就停，需要时再触发
