为图像上的特定区域着色[关闭]

Question

我目前正在开发允许用户从输入中选择颜色的网站，然后这些颜色将在图像的特定区域受到影响。

这是一个图片示例：

结果示例：如果用户选择红色，则 1 区域将被着色为红色，依此类推。 有没有办法使用 JavaScript/CSS 直接在图像上执行此操作，或者我必须使用画布组件？否则，如果已经有一个现有的工具可以实现这一点？

我发现了这个有趣的工具，但他们使用的是 geoJSON 标准：https://www.amcharts.com/demos/selecting-multiple-areas-map/

那么，我必须自己生成一个 geoJSON 格式才能直接处理，还是可以直接处理图像？ 如果你有什么想法，我很感兴趣！

Answer 1

您可以通过将图像分割成您需要的区域来处理图像，但这不是我的做法。

您可以使用 SVG 并将其放在 SVG 内的图像上方，您可以定义区域并在需要时隐藏/显示它们。

但是，如果您找到一些自动为您做事的库，那可能是更好的解决方案。

Answer 2

像HTML5-Paint-Bucket-Tool 这样的开源库可以帮助您将填充颜色存储到位图图像中。缺点是你不知道哪个区域的颜色是什么，因为它只是一个图像。

对于矢量或 SVG，状态控制更容易，但显示和渲染地图需要更多的努力。