用 canvas + getImageData 手动改色是唯一靠谱方式，需逐像素按通道加权重做非线性映射，才能实现胶片特有的高光/阴影分离、青橙对比、颗粒感与褪色偏移。
用 canvas + getImageData 手动改色是唯一靠谱方式
HTML5 本身没有“复古滤镜”这个内置功能，CSS 的 filter（比如 sepia(1)）只能模拟极简旧色调，离真正胶片感差很远。要控制高光/阴影分离、青橙对比、颗粒感、褪色偏移，必须进 canvas 拿像素逐个算。
关键点在于：不能只调 RGB 均值，得按通道加权重——比如老照片常压蓝通道、提红通道中段、弱化绿色中间灰阶。
-
ctx.drawImage(img, 0, 0)先把图绘到 canvas 上 - 用
ctx.getImageData(0, 0, width, height)拿到Uint8ClampedArray像素数组 - 遍历每个像素（步长为 4），对
data[i]（R）、data[i+1]（G）、data[i+2]（B）做非线性映射 - 写回
ctx.putImageData()，完成渲染
sepia 和 contrast 组合只能糊弄外行
CSS 滤镜链如 filter: sepia(0.8) contrast(1.2) brightness(0.95) 确实能出一点泛黄效果，但它作用于整个画面的线性变换，无法还原胶片特有的暗部青灰、亮部暖橙分离。实际测试中，这种写法在移动端常被硬件加速绕过，导致不同浏览器表现不一致——Safari 可能偏棕，Chrome 却发粉。
更麻烦的是：它无法叠加噪点或晕影（vignette），而这两项恰恰是复古感的关键信号。
立即学习“前端免费学习笔记（深入）”；
- 真要快速预览，可用
filter: url(#vintage)配合 SVG - 若只求静态图，不如直接用 Photopea 导出带滤镜的 PNG，再插入 HTML
手动调色时最容易错的三个通道处理逻辑
多数人直接给 R/G/B 加固定偏移，结果图发灰或死黑。复古调色本质是「重建胶片响应曲线」，不是简单调色相：
- 红通道：保留高光（>200）不变，中灰（80–180）乘以 1.15～1.3，暗部（
- 绿通道：整体压制，尤其中段（100–160）×0.7～0.85，避免“数码绿”残留
- 蓝通道：暗部（220）可微提（+3），制造褪色感
- 别忘了最后加
data[i+3] = 255（Alpha 必须设满，否则透明区域会漏底）
性能敏感场景必须用 OffscreenCanvas 或 Web Worker
一张 2000×1500 的图，在主线程跑完整像素循环可能卡顿 100ms+，用户拖拽或缩放时明显掉帧。解决方案不是“优化循环”，而是换执行环境：
- Chrome/Firefox 支持
OffscreenCanvas，可在 Worker 里创建并调用getContext('2d')，完全不阻塞 UI - 降级方案：用
requestIdleCallback分块处理，每次只算 50 行，留出空闲时间响应滚动 - 千万别在
onload里直接调用全量处理——图片加载完成 ≠ 渲染就绪，先offsetWidth确认 canvas 已 layout
真实项目里，最常被忽略的是 gamma 校正：sRGB 图像的像素值是非线性的，直接计算会导致暗部细节丢失。如果追求精准，得先转到线性空间（Math.pow(v/255, 2.2)），算完再转回。不过对复古风格来说，跳过这步反而更“有味道”。
