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

Question

关闭。这个问题是off-topic。它当前不接受答案。

---

是否要改善此问题？ Update the question，因此堆栈溢出为on-topic。

关闭2个月前。

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

这里是图像示例：

结果示例：如果用户选择红色，则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，状态控件更容易，但是显示和渲染地图将需要更多的精力。