直接用Canvas像素操作实现底片预览效果，核心是将每个像素的R、G、B值替换为255减原值，A值保持不变；需等图片加载完成再获取并处理像素数据，支持一键切换、透明区域保护、大图性能优化及悬停自动预览。
直接用 Canvas 的像素操作就能实现底片预览效果，核心是把每个像素的 R、G、B 值都替换成 255 减去原值，A（透明度）保持不变。这不是滤镜叠加，而是逐像素重算，所以结果精准、兼容性好、无需额外资源。
基础实现：加载图片后立即反转
关键在于等图片加载完成再操作，否则 getImageData 会失败。步骤很明确：
- 用
<img>标签加载目标图片，并监听onload - 获取 canvas 上下文，用
drawImage()把图片画进去 - 调用
getImageData(0, 0, width, height)获取像素数组 - 遍历数组，每 4 个元素一组（R、G、B、A），对前三个做
255 - value运算 - 用
putImageData()写回画布
注意：数组长度是 width × height × 4，循环步长必须为 4，避免错位修改。
交互增强：一键切换底片/原图
用户需要实时切换，不能每次重载图片。推荐方案是准备两块 canvas —— 一块存原始图像数据，一块存反转后数据：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 首次加载时，分别调用
getImageData获取原始和反转后的两份数据 - 用一个布尔变量（如
isInverted）记录当前状态 - 点击按钮时，根据状态决定调用哪份数据的
putImageData
这样切换极快，无闪烁，也避免重复计算。如果内存敏感，也可只存原始数据，每次切换时重新计算反转——现代浏览器下几十万像素内几乎无感知延迟。
细节优化：保留透明区域与性能控制
反转时若不加判断，可能让半透明区域变浑浊。稳妥做法是跳过 A 值为 0 的像素（完全透明）：
- 检查
data[i+3] === 0，满足则跳过 R/G/B 修改 - 对 PNG 图标或带蒙版的图片更友好
大图处理时建议加节流：比如限制最大处理尺寸（如宽高超 1200px 则先缩放再反转），或使用 requestIdleCallback 分帧处理，防止界面卡顿。
扩展提示：支持鼠标悬停自动预览
把底片效果做成悬停反馈，提升体验：
- 给图片容器绑定
mouseenter和mouseleave - 进入时触发反转绘制，离开时还原
- 可配合 CSS 过渡（如 opacity 渐变）让切换更柔和
注意 canvas 本身不可见，需用绝对定位盖在原图上方，或用 display: none/block 控制显隐，确保不影响页面布局流。
