canvas图像模糊处理核心是直接操控像素数据，通过两次一维高斯卷积（x方向+y方向）实现可控、兼容性好的高斯模糊，需注意边界处理、dpr适配及原始图像清晰度。
Canvas 图像模糊处理的核心在于直接操控像素数据，高斯模糊不是靠 CSS 的 filter: blur() 实现，而是通过加权平均算法对每个像素周围区域重新计算 RGB 值，效果更可控、兼容性更好，也适合局部模糊或动态模糊场景。
高斯模糊的本质是加权平均
每个目标像素的新颜色，由它自身及邻近像素按高斯分布权重叠加得出。权重中心最高，越远越低，形成自然过渡。二维高斯计算开销大，通常拆解为两次一维高斯（x 方向 + y 方向），效率更高。
实现高斯模糊的关键步骤
- 将图片绘制到 canvas 上，确保已加载完成
- 调用
ctx.getImageData(0, 0, width, height)获取原始像素数组（Uint8ClampedArray） - 根据模糊半径（radius）和标准差（sigma）生成一维高斯核（gaussMatrix），并归一化
- 先沿 x 轴对每行像素做卷积：对每个像素取左右 radius 范围内像素，按 gaussMatrix 加权求和
- 再沿 y 轴对每列像素做卷积：对每个像素取上下 radius 范围内像素，同样加权求和
- 边界处只计算存在的像素，避免越界访问；权重总和用于归一，防止变暗
注意边界与性能优化
- 高斯半径越大，模糊越强，但计算量呈平方增长。实际中 radius 取 5–15 即可，配合 sigma = radius / 3 效果较自然
- 处理前建议复制
imgData.data，避免原图数据被意外修改 - 若需实时模糊（如拖拽模糊区域），可限制只处理选区矩形内的像素，大幅减少计算量
- 对于高清屏（DPR > 1），务必先适配设备像素比：调整 canvas 物理宽高，并用
ctx.scale(dpr, dpr)同步坐标系，否则模糊结果本身会因缩放而失真
不要忽略图像来源的清晰度
如果原始图片分辨率低，或 drawImage 时发生了非整数缩放（比如 drawImage(img, 0, 0, 200.5, 150.3, ...)），像素信息已损失，再强的高斯算法也无法恢复细节。建议确保输入图像尺寸匹配目标画布物理像素，且绘制坐标/尺寸尽量为整数。
不复杂但容易忽略
