`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

图标反色处理

读取图标的像素数据逐通道取反,生成反色版本并即时替换。

OpenLayers 10.3.1 · 更新 2026-10-27
`r`n
源码与运行效果
运行效果
`r`n

说明

Canvas 的 getImageData() 拿到 RGBA 数组后,把 RGB 三个通道各取 255 - v,再用 putImageData() 写回, 得到反色图标。整个过程不修改原图,只生成新的 data URL。

示例在深色底图上对比原图与反色图:反色后图钉从蓝色变为暖色, 白色描边变成黑色,适合放在浅色底图上。

操作结果
勾选「反色」图标颜色反转,描边变黑
取消勾选恢复原始配色
叠加底图明暗能直观看出两版图标的对比度差异

反色只改像素颜色,透明通道保持不动;若把 alpha 也取反,图标会变成半透明,边缘出现白边。

`r`n
`r`n