Canvas实现怀旧胶片色调的核心是 getImageData 获取像素后，依次进行非线性RGB映射、颗粒与褪色叠加、暗角模拟，纯JS完成且可实时渲染。
Canvas 像素处理实现怀旧电影胶片色调，核心是通过 getImageData 获取像素数据，再对 RGB 通道施加非线性映射、添加颗粒感、模拟褪色与边缘暗角——不依赖外部库，纯 JS 即可完成。
1. 提取并遍历像素数据
先用 ctx.getImageData(0, 0, width, height) 获取原始像素数组（每 4 个值为 R、G、B、A），然后按行扫描修改：
- 像素数组是平坦的 Uint8ClampedArray，索引 = (y × width + x) × 4
- 避免直接修改原数组后立即
putImageData——应创建新数组或原地更新，防止读写冲突 - 若图像较大（如 1200×800），建议分块处理或用
requestIdleCallback防卡顿
2. 应用胶片色调映射（LUT 或手工曲线）
经典胶片感来自高光偏青、阴影偏橙、中间调轻微品红倾向。可用简化版通道偏移模拟：
- R 通道：阴影增强（低值乘 1.1），高光压暗（200–255 区间 × 0.92）
- G 通道：整体略降（× 0.96），并在 100–180 区间微升（模拟胶片中绿色收敛）
- B 通道：阴影提亮（0–60 区间 × 1.25），高光加青（220–255 区间 +5）
- 所有结果需截断到 0–255：
r = Math.min(255, Math.max(0, r))
3. 叠加胶片颗粒与褪色效果
真实胶片有随机噪点和轻微饱和度衰减：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 生成小振幅（±8）、高频（每 2–3 像素一变）的伪随机灰度噪声，叠加到各通道（权重：R 0.3 / G 0.5 / B 0.7）
- 整体降低饱和度：将 RGB 转 HSL，把 S 乘以 0.85，再转回 RGB（可用
rgbToHsl+hslToRgb辅助函数） - 轻微去锐化：对每个像素，取周围 3×3 均值 × 0.1 + 自身 × 0.9（仅对中心区域，避开边缘）
4. 添加光学暗角（Vignette）
模拟镜头边缘进光不足，增强复古沉浸感：
- 计算每个像素到画布中心的归一化距离：
dist = Math.sqrt((x-cx)² + (y-cy)²) / maxRadius - 用缓动函数衰减亮度：暗角强度 =
Math.pow(dist, 2.2) × 0.35（0.35 是最大压暗比例） - 对 R/G/B 各通道统一减去该值 × 255，再确保不低于 0
完成后调用 ctx.putImageData(modifiedData, 0, 0) 渲染。整个流程可在 16ms 内完成 800×600 图像，适合实时滤镜预览。
