首页 / OpenLayers / 使用示例
`r`n 图标反色处理
读取图标的像素数据逐通道取反,生成反色版本并即时替换。
`r`n
源码与运行效果
说明
Canvas 的 getImageData() 拿到 RGBA 数组后,把 RGB 三个通道各取
255 - v,再用 putImageData() 写回,
得到反色图标。整个过程不修改原图,只生成新的 data URL。
示例在深色底图上对比原图与反色图:反色后图钉从蓝色变为暖色, 白色描边变成黑色,适合放在浅色底图上。
| 操作 | 结果 |
|---|---|
| 勾选「反色」 | 图标颜色反转,描边变黑 |
| 取消勾选 | 恢复原始配色 |
| 叠加底图明暗 | 能直观看出两版图标的对比度差异 |
反色只改像素颜色,透明通道保持不动;若把 alpha 也取反,图标会变成半透明,边缘出现白边。