Canvas图像模糊与锐化有两种路径：一是用ctx.filter快速应用CSS滤镜（如'blur(3px)'），适合实时预览但无法导出真实模糊数据；二是手动 getImageData + 卷积计算，支持高斯模糊、拉普拉斯锐化等精准控制，可导出、叠加及二次处理，需注意性能优化与Retina屏适配。
Canvas 实现图像模糊与锐化，核心在于两种不同路径：一种是借助 ctx.filter 的 CSS 滤镜语法快速应用（适合简单、实时预览场景）；另一种是手动操作像素数据（getImageData + 算法计算），能精准控制模糊/锐化强度和质量，尤其适用于高保真图像处理。
模糊滤镜：用 ctx.filter 最简实现
- 直接设置
ctx.filter = 'blur(3px)'即可对后续绘制内容生效 - 支持像素单位（如
2px、8px），数值越大越模糊 - 可与其他滤镜组合，例如
'blur(4px) brightness(110%)' - 注意：该方式是浏览器渲染层处理，不修改原始像素，无法导出“真正模糊”的图像数据（仅视觉呈现）
模糊滤镜：手动卷积实现高精度高斯模糊
- 读取图像像素：
const imageData = ctx.getImageData(0, 0, width, height) - 提取
data数组（RGBA 四通道，每 4 个元素为一个像素） - 使用高斯核（如 5×5，标准差 σ=1.0）对每个像素周围邻域加权平均
- 避免边界越界：对边缘像素做镜像填充或截断处理
- 写回画布：
ctx.putImageData(imageData, 0, 0) - 优势：输出真实模糊图像，支持导出、叠加、二次处理；可调节核大小与权重分布
锐化滤镜：必须手动像素运算
-
ctx.filter不提供sharpen()函数，CSS 标准中无原生锐化语法 - 常用方法是拉普拉斯锐化或非锐化掩模（Unsharp Mask）：
- 先生成轻微模糊的副本（如
blur(1px)或小核均值模糊） - 计算原图与模糊图的差值（即“细节层”）
- 将细节层按比例（如 1.2 倍）叠加回原图：
output = original + amount × (original − blurred)
- 先生成轻微模糊的副本（如
- 关键控制点：模糊半径（通常 0.5–2px）、增强系数（0.5–3.0）、是否限制溢出（RGB 截断到 [0, 255]）
避坑提醒：清晰度与性能兼顾
- 高分辨率图像做逐像素卷积很耗时，建议：
- 对大图先缩放至合适尺寸再处理（如
canvas.width/height设为 800×600 内） - 使用
requestIdleCallback分块处理，避免主线程卡顿 - 开启
ctx.imageSmoothingEnabled = false防止 drawImage 自动插值模糊
- 对大图先缩放至合适尺寸再处理（如
- 移动端需适配 devicePixelRatio：物理画布尺寸应为
cssWidth × dpr，并调用ctx.scale(dpr, dpr)，否则模糊效果在 Retina 屏下失真
不复杂但容易忽略
