HTML5无内置油画滤镜，需用Canvas手动实现像素级处理；核心是邻域采样取众数颜色，通过radius和intensity控制笔触粗细与厚重感，并注意跨域限制和性能优化。
HTML5 本身没有内置“油画滤镜”，所谓“HTML5 油画风格”实际是靠 Canvas 手动实现像素级处理，或用 CSS filter 做近似模拟——但后者效果非常有限，不能真正还原油画质感。
用 Canvas 实现真油画效果（推荐）
油画的核心特征是：笔触感、颜料堆积、边缘柔化、局部色块聚合。这些必须通过逐像素分析邻域（如 3×3 或 5×5）并重采样实现，CSS filter 完全无法做到。
- 基本思路：读取图像像素 → 对每个像素，在其周围随机采样若干点 → 取这些点中出现频率最高的颜色（众数）→ 赋给当前像素
- 关键参数：
radius控制采样范围（越大笔触越粗），intensity控制采样点数量（越多越“厚重”） - 注意：
getImageData()会触发跨域限制，确保图片来自同源或已设置crossOrigin="anonymous" - 性能敏感：大图建议先缩放再处理，或用
requestIdleCallback分帧计算
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, w, h);
const data = imageData.data;
for (let y = 0; y < h; y++) {
for (let x = 0; x < w; x++) {
const center = (y * w + x) * 4;
// 随机采样 radius 内的 10 个点，统计 RGB 众数...
// （具体实现略，需哈希统计或直方图聚类）
}
}
ctx.putImageData(imageData, 0, 0);
CSS filter 只能做“伪油画”（慎用）
纯 CSS 无法模拟笔触，但可通过组合滤镜制造“粗糙+模糊+高对比”的错觉，适合背景图或低要求场景。
- 常见组合：
filter: contrast(1.3) saturate(1.2) blur(0.8px) brightness(0.95); -
blur()值超过1px会明显失真，0.4–0.9px是可用区间 - 在 Safari 上
blur()和contrast()叠加可能触发渲染 bug，建议加will-change: filter触发硬件加速 - 完全无法处理边缘保留、颜料厚度变化等油画本质特征
WebGL 方案（高性能需求时）
若需实时处理视频或高清图，Canvas 2D 会卡顿，应改用 WebGL + 自定义着色器（fragment shader）。
立即学习“前端免费学习笔记（深入）”；
- 核心逻辑移到 GPU：用
texture2D采样邻域，用round()或floor()模拟颜料块状化 - 推荐用
three.js的ShaderMaterial封装，避免手写完整 WebGL 管线 - 注意移动端兼容性：
mediump精度下 RGB 计算易偏色，需在着色器中做 gamma 校正
真正油画效果的关键不在“滤镜名称”，而在是否对像素邻域做了有向采样和颜色聚合——这点连 SVG filter（如 <feConvolveMatrix>）都做不到，必须自己算。别被“HTML5 滤镜”这个词带偏了方向。
