可以在 Javascript 中比较两个图像吗？答案

【问题标题】：Possible to compare two images in Javascript?可以在 Javascript 中比较两个图像吗？
【发布时间】：2012-06-23 00:19:27
【问题描述】：

有没有办法比较两个具有不同文件名的图像文件？所以我想看看它们是否与javascript相等。这可能吗？

这个用途：我有一个需要在灯箱中弹出的图片库。当灯箱打开时，我将连接到回调以检查重复的图像，当找到时，将它们从灯箱库中删除，这样用户就不会看到重复的图像。

【问题讨论】：

考虑到JavaScript不能访问文件系统，没有。
你想进行什么样的比较？
尝试查看两个图像是否相同，即使它们具有不同的文件名。

标签： javascript image

【解决方案1】：

我想你可以。伪代码：

检查图像的宽度和高度是否相同。如果不是，它们就不可能相同。

创建一个可以并排放置两个图像的画布。

在画布上绘制图像。

逐个像素地比较它们。这可以使用从getPixel from HTML Canvas? 借来的代码相当容易地完成

请记住，一旦有一个像素不匹配，就要跳出循环。

最坏情况下的运行时间为 O(wh)，这发生在图像实际上相等时。

【讨论】：

是的，正是我在打字的过程中。它可以工作，但对于大量图像来说会非常非常慢。
嗯，事后看来，我认为更好的方法是使用 AJAX 和 PHP 来处理比较...。似乎使用 JS 相当复杂。
嗯，PHP 也必须进行逐像素比较。您只是将负载放在服务器上，而不是将其分发到用户的机器上。
抱歉，我意识到我在解释我需要什么方面做得很糟糕......我编辑了帖子，所以你可以更清楚地看到我想要做什么。

【解决方案2】：

检查图像大小是否相等。

别忘了检查宽度和高度。

To find image file size

【讨论】：

两个图像可以在视觉上相同，但具有不同的文件大小。比较全 RGB PNG 图像与 Indexed-PNG 中的相同图像。将该索引 PNG 图像与调色板中未使用颜色的图像进行比较。
请举个例子，我很好奇。
adamhaskell.net/img/imgsize同一张图片3次，不同的保存方式，不同的文件大小，相同的格式。
好的，感谢您提供此信息。 @Rick 不需要那种敏感，所以他可以使用我的方法。

【解决方案3】：

Tyler 是正确的，未经用户同意，您不能访问文件系统。

但是，如果您想比较可用于 javascript 代码的图像，例如通过使用 url 或使用上传字段，您应该查看这个 SO 问题：Compare two Images in JavaScript

基本上，您将图像转换为 canvas 元素并使用 base64 值来比较两者，就像人们通过检查文档的校验和来确认文档是否“有效”一样。

【讨论】：