HTML5 本身不提供高斯模糊原生API，需依赖CSS filter: blur()（快捷但粒度粗、近似模拟）或Canvas手动实现（可控但开销大），二者均受限于性能、跨域、精度与导出质量。
HTML5 本身不提供高斯模糊图片的原生 API
直接用 filter: blur()）或 Canvas 2D 手动实现。前者简单但控制粒度粗，后者可精确到像素但需编程处理。
CSS filter: blur() 是最快捷的模糊方式
适用于背景虚化、悬停过渡、视觉层次增强等场景，但注意它只是高斯模糊的近似模拟，且不支持自定义核大小或标准差。
-
blur(0px)到blur(30px)是常用范围，超过 10px 后性能下降明显，尤其在移动端 - 必须作用于已渲染的元素（如
- 若需局部模糊（比如只模糊人脸区域），CSS 无法做到，得切图或结合 Canvas/SVG mask
- 示例：
@@##@@ @@##@@
Canvas 手动实现高斯模糊更可控但开销大
适合需要精确模糊强度、动态区域模糊、或导出模糊后图片的场景（如图像编辑器）。核心是用 JS 实现二维卷积，或复用成熟的库如
stackblur.js。- 原生实现需两次一维高斯卷积（水平 + 垂直），否则直接二维计算性能极差
-
ctx.getImageData()读取像素前，确保图片已跨域允许（img.crossOrigin = "anonymous"），否则会触发安全错误SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D' - 模糊半径大于 10 时，建议用 Web Worker 避免主线程卡顿
- 轻量替代：
import { stackBlurImage } from 'stackblur-canvas'; stackBlurImage('myImage', 'myCanvas', 8, 8, false); // id, canvasId, radiusX, radiusY, blurAlpha
模糊后导出为新图片要注意 MIME 类型和质量
用
canvas.toDataURL('image/jpeg', 0.9)导出时，模糊本身不会改变压缩率，但多次读写 canvas 会导致累积画质损失。立即学习“前端免费学习笔记（深入）”；
- 若原始图是 PNG（含透明通道），用
image/png导出；若导出为 JPEG，透明区域会变黑，需提前填充背景色 - 避免链式操作：不要「模糊 → toDataURL → new Image() → drawImage → 再模糊」，应始终基于原始像素数据重算
- 服务端生成模糊图仍是更稳的选择——前端模糊只是临时展示，真要 SEO 或高清交付，还是得靠
sharp、ImageMagick等后端处理
