红蓝错位复古效果需用canvas getimagedata/putimagedata实现三通道整像素偏移（红右2px、绿原位、蓝左1px下1px），再叠加非线性映射与0.8%高斯噪点，css/svg滤镜无法实现真空间错位。
直接用 Canvas 的 getImageData + putImageData 对 R、G、B 通道做**整像素偏移**，再叠加轻微噪点和色调映射，就能实现有质感的红蓝错位复古效果。CSS filter 或 SVG 滤镜做不到真错位，只能模拟色偏。
1. 核心：三通道分别偏移（不是调色，是空间错位）
错位才是“故障感”和复古感的关键。必须让红、绿、蓝三通道在画布上占据不同位置：
- 红色通道 → 向右偏移 2 像素（
x + 2） - 绿色通道 → 保持原位（
x, y） - 蓝色通道 → 向左偏移 1 像素，同时下移 1 像素（
x - 1, y + 1） - 所有偏移量必须是整数，且写入前要检查目标坐标是否在画布范围内，否则会静默失败或报
IndexSizeError
2. 复古增强：非线性通道映射 + 轻微噪点
单纯错位只是“故障”，加这步才像老胶片：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 红通道：灰度段（约 80–180）提亮 1.2 倍（增强暖调层次）
- 绿通道：整体压制，尤其 100–160 区间 ×0.75（削弱青绿，突出棕褐）
- 蓝通道：暗部（0–60）微提 +3，避免死黑（保留旧照片的泛灰感）
- 最后叠加强度 0.8% 的高斯噪点（用
Math.random()加扰动值，控制在 ±4 内）
3. 实操关键代码片段
在 image.onload 后执行：
- 先
ctx.drawImage(image, 0, 0)把图绘到底层 canvas - 调
ctx.getImageData(0, 0, width, height)获取原始像素数组data - 新建空
ImageData，遍历每个像素，按通道分别写入偏移后的位置（注意：RGBA 四字节一组，索引为i、i+1、i+2、i+3） - 对写入前的 R/G/B 值，套用上述非线性映射逻辑（例如：
if (r > 80 && r ） - 写入时加噪：
r = Math.max(0, Math.min(255, r + (Math.random() - 0.5) * 8 * 0.008)) - 最后
ctx.putImageData(newData, 0, 0)贴回
4. 性能与兼容提醒
移动端尤其要注意：
- iOS Safari 对
getImageData有尺寸限制（截至 2026 年初，单边超 2048px 可能拒绝执行） - 大图或动画中频繁调用易卡顿；如需实时应用，建议降采样到 800px 宽以内再处理
- 别用
ctx.filter——它只支持 blur/brightness 等基础效果，不支持通道位移 - 也别用
filter: sepia或<fecolormatrix></fecolormatrix>，它们只是线性变色，没有错位镶边效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
