网页端Canvas局部锐化核心是像素级计算与3×3拉普拉斯卷积核（如[0,-1,0;-1,5,-1;0,-1,0]）运算，仅对指定区域（矩形/圆形/蒙版）内非边界像素做RGB加权增强并裁剪至0–255，Alpha保持不变，需注意跨域设置、DPR适配、缩放采样及putImageData定位。
网页端用 Canvas 实现图片局部锐化，核心是**像素级计算 + 卷积核（Convolution Kernel）运算**，不是简单调滤镜，而是对目标区域的 RGB 值做加权增强。关键在于：只处理用户指定的局部（如鼠标框选、圆形遮罩或坐标范围），其余区域保持原样。
一、明确“局部”的实现方式
锐化必须先定义作用区域，常见做法有：
-
坐标+宽高矩形区域：比如用户拖拽选择一块 200×150 的区域，传入
(x, y, width, height) - 中心点+半径圆形区域：如点击某点，以该点为中心、半径 80px 的圆内执行锐化
- 蒙版图像（alpha 通道控制）：用另一张灰度图作为权重掩膜，值越高锐化越强
无论哪种，最终都转化为 getImageData(x, y, w, h) 获取对应区域的像素数组。
二、使用拉普拉斯（Laplacian）卷积核做锐化
最常用且效果直观的是 3×3 拉普拉斯锐化核，例如：
[ 0, -1, 0,-1, 5, -1,
0, -1, 0 ]
它通过增强中心像素与周围像素的差异来提升边缘对比度。操作步骤如下：
- 对局部区域每个非边缘像素（避开边界 1 像素），取其周围 3×3 邻域
- 将邻域各像素的 R/G/B 值分别与对应核系数相乘、求和
- 结果值需裁剪到 [0, 255] 范围（避免溢出变黑/白块）
- 仅更新该局部区域的
data数组，不碰其他像素
注意：Alpha 通道（第 4 个值）保持不变，不参与锐化计算。
三、关键细节与避坑点
实际编码中容易忽略但直接影响效果的几点：
-
跨域图片必须设置
img.crossOrigin = "anonymous"，否则getImageData报安全错误 -
局部处理前建议先缩放采样：若原图很大（如 4000×3000），可先用
createImageBitmap缩放到 500px 宽再处理，提速明显 -
Canvas 尺寸要匹配设备像素比（dpr）：高清屏下需按
window.devicePixelRatio放大 canvas.width/height，并用ctx.scale(dpr, dpr)绘制，否则锐化后仍模糊 - 锐化强度可调节：把核中的「5」换成更大的数（如 6.5），或给整个计算结果叠加一个增益系数（如 ×1.2），就能控制强弱
四、输出与合成
处理完局部像素后，不能直接 putImageData 到 (0,0)，否则只覆盖左上角。正确做法是：
- 用
ctx.putImageData(imageData, x, y)—— 第二、三个参数填你最初读取时的x和y - 若需叠加效果（如原图+锐化层），可再用
drawImage把原始图片重绘一次，再把锐化区域覆盖上去 - 导出结果用
canvas.toDataURL("image/png")即可保存为高清图
