HTML5中可通过Canvas的ImageData对象实现反色效果：遍历像素数组，对每个像素的R、G、B分量执行255-value运算，Alpha通道保持不变，再用putImageData重绘。
在 HTML5 中，可以通过 Canvas 的 ImageData 对象直接读取和修改每个像素的 RGB 值，实现反色（即颜色取反）效果。核心思路是：对每个像素的 R、G、B 分量分别用 255 - 当前值 替换，而 Alpha 通道保持不变。
获取图像数据并访问像素数组
先将图片绘制到 <canvas> 上，再用 getContext('2d').getImageData() 获取像素级数据：
- 返回的
ImageData.data是一个一维 Uint8ClampedArray，每 4 个连续元素代表一个像素：[R, G, B, A] - 数组长度为
width × height × 4，索引按行优先排列 - 注意：必须确保图像已加载完成，且 canvas 与图像同源（或启用 CORS），否则会因安全限制报错
遍历并修改 RGB 值实现反色
对每个像素的 R、G、B 分量执行 255 - value 运算：
- 遍历步长为 4（跳过 alpha）：
for (let i = 0; i -
data[i]→ R，data[i+1]→ G，data[i+2]→ B，data[i+3]→ A（不改动） - 直接赋值即可，如：
data[i] = 255 - data[i]; - Uint8ClampedArray 自动处理越界（例如 -10 变成 0，300 变成 255），无需手动 clamp
写回画布并显示结果
修改完 ImageData.data 后，调用 putImageData() 将数据渲染回 canvas：
立即学习“前端免费学习笔记（深入）”；
- 确保传入原始的
ImageData对象（不是 data 数组本身） - 指定目标坐标（通常是
(0, 0)覆盖整个画布） - 若需保留原图，可使用两个 canvas：一个存放原图，一个用于显示反色结果
完整示例代码片段
以下为关键逻辑（省略 HTML 结构和错误处理）：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
<p>const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;</p><p>for (let i = 0; i < data.length; i += 4) {
data[i] = 255 - data[i]; // R
data[i+1] = 255 - data[i+1]; // G
data[i+2] = 255 - data[i+2]; // B
// data[i+3] is alpha → unchanged
}</p><p>ctx.putImageData(imageData, 0, 0);
};
img.src = 'example.jpg';</p>不复杂但容易忽略：反色仅作用于已绘制到 canvas 上的像素，不能直接修改原始图片文件；实时处理大图时注意性能，必要时可考虑用 OffscreenCanvas 或 Web Worker 分离计算。
