我有一个带有标记的图像，如the one with a pie chart here。
如何在其上找到特定标志并使用画布替换为另一个标志？
修改 我无法控制源图像，但要查找的区域始终是已知的，要替换的图像始终与要查找的图像大小相同。我只需要用另一个特定的标志替换一个特定的标志。
编辑2： 该标志可能会多次出现在图像中。
答案 0 :(得分：1)
你不会看到惊人的表现，但是解决这个问题的一种方法就是迭代饼图图像中的像素。
在饼图图像上调用getImageData()以获取图像的所有像素数据（即请求最大尺寸）。同样，在您要搜索的标记上调用getImageData()。设置一个循环，迭代从饼图中获取的所有像素。对于每个像素，假设它是您要搜索的标志的左上角（或基于迭代顺序的另一个角）。将其与标志像素数据中的第一个像素进行比较，如果它们一致，则继续在等于标志宽度和高度的窗口大小内进行迭代。如果你到窗口迭代结束并且每个像素对匹配，你就找到了你正在寻找的旗帜。如果没有，请转到饼图数据中的下一个像素，然后再次遍历窗口。
请注意，在最糟糕的情况下，您使用O([N * W * H] - [W * H])和O(N * W * H)查看N = pie chart pixels或W x H = flag dimensions。你可以通过不知道没有标志的窗口迭代，以及通过更智能地移动窗口来改进这一点。找到匹配项后，您可以使用要调用drawImage()的角落坐标将新标记粘贴到顶部。
当然，这种方法假定您要搜索的标记在饼图图像中表示为 完全 。如果要将非压缩标志与压缩饼图图像进行比较，反之亦然，则无法找到匹配项。同样，任何尺寸或方向的变化都将完全打败这种方法。如果您需要这种灵活性，那么您正在钻研SIFT领域。虽然我确信可以使用canvas元素实现，但我不想成为那样做的人。
在这种情况下，您需要确保在执行迭代时不会不必要地遍历DOM。特别是，您需要存储像素数据的本地引用，如下所述：http://www.onaluf.org/en/entry/13
答案 1 :(得分：0)
鉴于你已经知道了坐标并有一张要映射的图像，你可能想要使用drawImage。