经纬志
首页 / OpenLayers / 使用示例

像素级颜色运算

取出影像的像素数组,按亮度、对比度、饱和度做矩阵运算,再写回 canvas 生成新的图层源。

OpenLayers 10.3.1 · 对应官方 color-manipulation.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

颜色调整可以写成一次线性运算:先按 (v − 128) × 对比度 + 128 + 亮度 处理每个通道,再按亮度权重算出灰度,最后用 灰度 + (原值 − 灰度) × 饱和度 拉开或压缩色彩。

像素数组用 getImageData() 一次性取到,之后每次调整只在内存里循环, 结果写回 canvas 再 toDataURL()。拖动滑块时用 90 ms 的节流, 避免每个 input 事件都触发一次全图重绘。

操作结果
拖动「亮度」整体变亮或变暗,色彩关系不变
拖动「对比度」中间调向两端拉开
拖动「饱和度」降到 -100 时接近黑白

在 WebGL 瓦片图层上做同样的事,写进 style.color 表达式即可,交给 GPU 处理,不需要逐像素循环。