html5 canvas图像锐化本质是用3×3卷积核对每个像素做加权计算，需手动遍历、读邻域、按核运算、写新数组，核心要求核元素和为1以保亮度，跳过边缘与alpha通道，读写分离防覆盖，并注意性能优化。
HTML5 Canvas 实现图像锐化，本质是用 3×3 卷积核对每个像素做加权重算，不是调用滤镜 API。核心在于手动遍历像素、读取邻域、按核计算新值、写入新数组——整个过程必须绕过浏览器内置渲染管线，纯靠 JavaScript 控制。
卷积核设计要满足“和为1”
锐化效果依赖核的数学特性：中心权重高、周围为负，整体加总必须等于 1，才能保持整体亮度不变。常用核如：
- [0, -1, 0; -1, 5, -1; 0, -1, 0] —— 简单有效，增强局部对比
- [-1, -1, -1; -1, 9, -1; -1, -1, -1] —— 更强响应，适合低对比原图
若核元素和不为 1（比如等于 0 或 2），结果会整体变暗或过曝，需手动归一化：每个值除以总和再乘以 1。
像素遍历必须跳过边缘并保护 Alpha
图像边缘像素没有完整 3×3 邻域，直接计算会越界。正确做法是只处理内部区域（x 从 1 到 width−2，y 从 1 到 height−2），边缘用复制法填充（即取最近有效像素值）。
RGBA 四通道中，Alpha 通常跳过不参与卷积——否则透明区域可能被污染。R/G/B 分开计算，A 值原样复制即可。
索引定位必须精确：某点 (x, y) 的 R 值在 data 数组中的下标是 (y × width + x) × 4，G 是 +1，B 是 +2，A 是 +3。
读写必须分离，不能原地修改
这是最容易出错的环节。如果边读 data 边往 data 里写新值，后续像素会读到已被覆盖的中间结果，导致图像错位、条纹或马赛克。
必须提前创建新缓冲区：
- const tempData = new Uint8ClampedArray(data); —— 复制原始数据
- 所有计算基于 tempData 读取邻域
- 结果写入原 data 数组（或另一个 outputBuf）
卷积计算本身是 9 次乘加：对每个通道，把 3×3 区域内 9 个像素值分别乘对应核系数，再累加。
性能关键细节不能忽略
全图逐像素卷积在主线程跑大图极易卡顿。实用建议：
- 图像宽高超过 1000px 时，先用 canvas 绘图缩放降采样至 50%，处理完再双线性放大回显
- 用 requestIdleCallback 调度处理，避免阻塞用户交互
- 预创建 inputBuf/outputBuf 两个 ImageData 实例，复用内存，减少 GC 压力
- 跨域图片务必加 crossOrigin="anonymous"，否则 getImageData 报 SecurityError
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
