html5滤镜如何让颜色反转_html5颜色反转滤镜法【步骤】

ctx.filter="invert(100%)"不生效是因为它只影响后续绘制操作，不修改已有像素；最可靠方案是getImageData()+循环计算RGBA值（r/g/b=255-原值），兼容性好且可控性强。

HTML5 Canvas 中用 ctx.filter 实现颜色反转不生效？

直接写 ctx.filter = "invert(100%)" 在部分浏览器（尤其是 Safari 和旧版 Chrome）中会被忽略——ctx.filter 仅对后续的 drawImage()、fillRect() 等绘制操作生效，**不对已存在的 canvas 内容重绘**，也不会影响通过 putImageData() 写入的像素。

常见错误现象：ctx.filter = "invert(100%)"; ctx.drawImage(canvas, 0, 0); 却没变化，是因为你把 canvas 自己画回自己，而源 canvas 的像素早已是“原始色”，滤镜没机会作用于像素数据本身。

• 真正起效的方式是：先创建一个临时 canvas，用 drawImage() 把原图绘制过去，此时滤镜才作用于该绘制动作
• 或者放弃 ctx.filter，改用 getImageData() + 手动计算像素（兼容性更好、可控性强）
• ctx.filter 不支持对 ImageData 对象操作，这点和 CSS filter 有本质区别

用 getImageData() + 循环翻转 RGBA 值最可靠

这是真正意义上“修改像素”的做法，100% 跨浏览器生效，且可精确控制（比如只反转 R/G/B，保留 alpha 不变）。

核心逻辑就是：读出每个像素的 r、g、b，分别替换为 255 - r、255 - g、255 - b，a 通常保持不变（除非你要做透明度反转）。

const ctx = canvas.
getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
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] 保持不变（alpha）
}
ctx.putImageData(imageData, 0, 0);

• 注意 data 是 Uint8ClampedArray，索引每 4 位一组对应一个像素的 RGBA
• 如果 canvas 没有跨域权限，getImageData() 会抛出 SecurityError，需确保图片已设置 crossOrigin="anonymous"
• 大图（如 2000×1500）循环处理可能卡顿，可考虑用 Web Worker 或 Uint32Array 视图批量处理（一次改一个 32 位整数）

用 CSS filter 临时覆盖 canvas 显示效果

如果你只是想在页面上「看起来」反转，并不要求导出反转后的图像数据，那么给 元素加 CSS 是最快方案：

canvas {
  filter: invert(100%);
}

优点是零 JS、无性能损耗、实时响应；缺点也很明确：

• 只是视觉层叠加，toDataURL() 或 captureStream() 输出的仍是原始像素
• 和页面其他元素混合时可能因层叠上下文导致失效（比如父容器有 transform 或 opacity）
• 部分安卓 WebView 对 filter 支持不稳定，尤其连用多个 filter 时

WebGL 方案适合高频/实时反转需求

如果项目已有 WebGL 上下文，或需要每帧都反转（比如视频流处理），用 fragment shader 写一行 gl_FragColor = vec4(1.0 - texture2D(u_texture, v_texCoord).rgb, 1.0); 效率远高于 CPU 像素遍历。

但引入 WebGL 成本高，调试门槛明显上升；普通静态图或偶尔反转完全没必要。

真正容易被忽略的是：颜色反转 ≠ 简单取反。sRGB 色彩空间下直接 255 - x 是近似处理，严格场景需先线性化再反转再伽马校正——不过绝大多数 UI 场景，直接字节取反已足够准确。