首页 / OpenLayers / 使用示例
像素级颜色运算
取出影像的像素数组,按亮度、对比度、饱和度做矩阵运算,再写回 canvas 生成新的图层源。
源码与运行效果
说明
颜色调整可以写成一次线性运算:先按 (v − 128) × 对比度 + 128 + 亮度
处理每个通道,再按亮度权重算出灰度,最后用 灰度 + (原值 − 灰度) × 饱和度
拉开或压缩色彩。
像素数组用 getImageData() 一次性取到,之后每次调整只在内存里循环,
结果写回 canvas 再 toDataURL()。拖动滑块时用 90 ms 的节流,
避免每个 input 事件都触发一次全图重绘。
| 操作 | 结果 |
|---|---|
| 拖动「亮度」 | 整体变亮或变暗,色彩关系不变 |
| 拖动「对比度」 | 中间调向两端拉开 |
| 拖动「饱和度」 | 降到 -100 时接近黑白 |
在 WebGL 瓦片图层上做同样的事,写进 style.color 表达式即可,交给 GPU 处理,不需要逐像素循环。