HTML5无原生锐化滤镜，需用SVG的feConvolveMatrix（如kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"）或Canvas手动实现USM算法，二者效果有限且有兼容性与性能限制。
HTML5 本身没有原生的“锐化滤镜”API，filter CSS 属性支持的 blur()、contrast()、brightness() 等函数里，**不包含 sharpen() 或类似直接锐化指令**。真要实现边缘锐化，得绕道 SVG 滤镜或 Canvas 手动卷积——而且效果和 Photoshop 的“智能锐化”有本质区别。
用 SVG
这是目前在 HTML5 生态中最接近“锐化”的标准方案，通过自定义卷积核增强边缘对比度。关键不是调个参数，而是理解核矩阵怎么写：
-
order="3"表示 3×3 卷积核，最常用 - 典型锐化核如：
kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"（中心权重高，周围为负） - 必须设
divisor="1"，否则默认归一化会削弱效果 - 加上
preserveAlpha="false"，避免透明通道干扰计算
示例用法：
@@##@@
Canvas 2D 上手动实现锐化（可控但开销大）
适合需要逐像素控制、或动态调整强度的场景，比如图像编辑器。核心是：先高斯模糊，再做原图减模糊图（即“非锐化掩模” USM 原理）：
立即学习“前端免费学习笔记（深入）”；
- 用
ctx.getImageData()取出像素； - 对每个通道做简单 3×3 模糊（均值或加权）；
- 计算差值：
sharpPixel = original + (original - blurred) * amount； -
amount通常取 0.5~2.0，超过 2.0 易出现噪点和光晕； - 注意处理边界像素，否则
Uint8ClampedArray越界会变黑或白块。
别把 image-rendering: crisp-edges 当锐化
这个 CSS 属性只影响缩放插值方式（禁用双线性/双三次），让像素图“不模糊”，但它不增强边缘对比度，也不改变原始细节。常见误用场景：
- 对照片设
crisp-edges→ 出现明显锯齿+噪点，不是锐化是失真 - 对 SVG 或 icon font 使用 → 无效，因为它们本就是矢量
- 和
filter: contrast(1.2)混用 → 对比度拉高可能掩盖伪影，但不是真正锐化
移动端和旧浏览器的兼容性陷阱
- 加个 fallback：
filter: contrast(1.1) brightness(1.05); - 用 JS 检测：
SVGElement.prototype.hasAttributeNS不代表滤镜生效，得实际画到 canvas 上再读像素验证 - Canvas 方案虽兼容好，但对 >2MP 图片，
getImageData()在低端安卓机上可能卡顿甚至 OOM
真正的锐化永远在采样前（光学镜头）或 RAW 处理阶段最有效；HTML5 层能做的只是有限补偿——别指望它救模糊照片，优先检查图片源质量和尺寸是否合理。
