html5滤镜怎样做胶片颗粒_html5胶片颗粒滤镜教程【步骤】

胶片颗粒需模拟成簇、亮度相关、带色偏的噪声：canvas方案用正态分布+低分辨率噪声图缩放；svg方案用feTurbulence调baseFrequency≈0.001–0.005；webgl方案用预生成噪声纹理+NEAREST过滤；低端设备应降级为反差调整。

canvas 2D 上用 getImageData 模拟胶片颗粒

html5 本身不提供「胶片颗粒」这类风格化滤镜，必须手动实现。核心思路是：在 canvas 上绘制图像后，用 getImageData 读取像素，对每个像素叠加随机偏移的 RGB 噪声（非纯灰度噪点，要保留色彩倾向和明暗层次）。

常见错误是直接用 math.random() 给每个通道加 ±10 的值——这会产生刺眼的数码噪点，而非胶片那种微小、成簇、略带暖/青偏色的颗粒感。

• 建议用正态分布随机数（如 Box-Muller 变换）控制噪声幅度，让多数颗粒偏小，少数略大
• 颗粒强度应随原始像素亮度变化：暗部颗粒更明显，亮部抑制，模拟胶片的 gamma 响应
• 避免逐像素独立扰动；可先生成低分辨率噪声图（如 64×64），再双线性缩放到原图尺寸，模拟颗粒的“成簇”物理特性

css Filter: url(#grain) 配合 SVG feTurbulence

这是性能更好、可硬件加速的方案，但控制粒度较粗。关键在于 SVG 滤镜中用 feTurbulence 生成自然噪声，再用 feColorMatrix 调整色调和对比度，最后混合到原图上。

容易踩的坑：baseFrequency 设为 0.05 0.05 看似合理，实际会导致颗粒过大；胶片颗粒对应真实尺寸约 2–8μm，映射到屏幕需设为 0.001–0.005（且两个值略有差异，制造各向异性）。

立即学习“前端免费学习笔记（深入）”；

• 必须设置 type="turbulence"，numOctaves="2" 比默认 1 更有层次
• 用 feComposite operator="arithmetic" k1="0" k2="1" k3="1" k4="0" 实现线性叠加，比 multiply 混合更可控
• 滤镜需挂载在 内并设 width/height="0" 隐藏，否则可能触发意外布局重排

WebGL 方案里 gl_FragColor 中加噪声采样

若已有 WebGL 渲染管线（比如用 Three.js 展示图片），在 fragment shader 里采样噪声纹理最高效。噪声纹理不是 PNG，而是运行时用 gl.texImage2D 传入 js 生成的 Uint8Array 数据，尺寸建议 128×128 或 256×256。

注意：直接在 shader 里用 fract(sin(dot(uv, vec2(12.9898, 78.233))) * 43758.5453) 这类哈希函数生成噪声，虽省纹理内存，但会在移动端出现明显 tile 边界——因为精度丢失导致相邻像素 hash 值突变。

• 噪声纹理应含 3 个通道：R 控制亮度扰动，G/B 模拟轻微色偏（如 R+2, G−1, B−1 表现暖粒）
• 采样坐标要用 uv + noise.rg * grainScale，其中 grainScale 是 uniform，控制整体强度（典型值 0.002–0.008）
• 务必启用 gl.NEAREST 纹理过滤，避免线性插值模糊掉颗粒细节

兼容性与性能取舍：何时该放弃「真实颗粒」

在低端 android 或 ios safari 上，getImageData 处理 1080p 图像可能卡顿 200ms 以上；SVG 滤镜在 chrome 115+ 有显著优化，但 Safari 对 feTurbulence 的渲染仍走 CPU 路径；WebGL 则要求用户设备支持 OES_texture_float 扩展才能做高质量浮点噪声。

真正实用的做法是检测 navigator.hardwareConcurrency 和 devicePixelRatio，动态降级：

• hardwareConcurrency ≤ 2 → 改用 CSS filter: contrast(1.1) brightness(0.95) 模拟胶片反差，跳过颗粒
• devicePixelRatio ≥ 3 → 启用高密度噪声纹理（256×256），否则用 128×128
• 首次加载时用 requestIdleCallback 异步生成噪声纹理，避免阻塞主线程

颗粒效果最容易被忽略的，其实是时间维度——真实胶片在扫描或放映时，颗粒会随画面运动产生微弱拖影。静态图像加颗粒只是第一步，后续动效中是否同步更新噪声相位，才是区分「像」和「是」的关键。