因为您已经认为自己能够‘在运行中’操作图像，所以您必须首先将其绘制到html <canvas>元素上.另一方面，Leaflet的imageOverlay()方法需要一个指向实际图像的URL--因此，仅靠操纵画布不会给您带来太大帮助.
但还是有希望的.canvas对象提供了一个名为toDataURL()的方法，它返回一些可以输入到imageOverlay()中的内容.
让我们分解一下你必须做的事情:
- 创建一个空Image并使用它加载 map
- 如果图像加载完成，则创建一个图像大小的画布
- 将图像绘制到画布上
- 循环通过
ctx.getImageData()获得的画布的图像数据.这将为画布中的每个像素返回一个由红色、绿色、蓝色和Alpha值组成的大型array.由于您的colour_mapping对象由十六进制值组成，例如#4dc8c8，我们首先需要将RGB值转换为十六进制，以便能够在对象中查找匹配项.如果找到匹配项，则获取替换 colored颜色 并将十六进制值转换为RGB以最终更改 colored颜色 .
- 将处理后的图像数据绘制到画布上.
- 使用
toDataURL()获取数据URL，最后呼叫imageOverlay().
下面是一个用白色替换两种 colored颜色 的示例:
var map = L.map('map').setView([0.5, 0.5], 9);
var imageUrl = './js/UAZyt.png';
imageUrl = "https://corsproxy.io/?https://i.stack.imgur.com/UAZyt.png"
let image = new Image();
image.crossOrigin = "anonymous"
image.onload = (e) => {
imageBounds = [
[0, 0],
[1, 1]
];
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = e.target.naturalWidth;
canvas.height = e.target.naturalHeight;
ctx.drawImage(e.target, 0, 0);
let colour_mapping = {
'#4dc8c8': '#ffffff',
'#be8eff': '#ffffff'
};
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let r, g, b, hex, hex2;
for (let a = 0; a < imageData.data.length; a += 4) {
r = imageData.data[a];
g = imageData.data[a + 1];
b = imageData.data[a + 2];
hex = "#" + ((r << 16) | (g << 8) | b).toString(16);
if (colour_mapping[hex]) {
hex2 = colour_mapping[hex].match(/[0-9a-f]{2}/g);
imageData.data[a] = parseInt(hex2[0], 16);
imageData.data[a + 1] = parseInt(hex2[1], 16);
imageData.data[a + 2] = parseInt(hex2[2], 16);
}
}
ctx.putImageData(imageData, 0, 0);
L.imageOverlay(canvas.toDataURL(), imageBounds).addTo(map);
}
image.src = imageUrl;
#map {
height: 360px;
}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<div id="map"></div>
