javascript - 如何在图片上填充单元格

我的图片包含不同单元格大小的网格。举个例子，我给你看了一个类似的图像。

正如您所看到的，细胞大小不同。当我点击它时，我必须用任何颜色填充单元格。如何使用油漆桶工具检测像PhotoShop这样的图像上的单元格？我应该使用HTML5画布吗？

我必须将所有彩色单元格存储到我的数据库中，并在下次重新填充它们。所以我必须为每个彩色单元格初始化一个变量。

你有代码片段来帮助我吗？