js判断两张图片重复的

在JavaScript中判断两张图片是否重复，可以通过比较它们的像素数据来实现。以下是具体的步骤和示例代码：

基础概念

像素数据：每张图片都是由像素组成的，每个像素有其特定的颜色值。
Canvas API：HTML5提供的Canvas元素可以用来绘制图形，并且可以通过API获取图片的像素数据。

类型与应用场景

完全重复：两张图片在每一个像素上都完全相同。
近似重复：两张图片在大部分区域相似，但有细微差异（这种情况需要更复杂的算法，如感知哈希）。

示例代码

以下是一个简单的示例，展示如何使用JavaScript来判断两张图片是否完全重复：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片重复检测</title>
</head>
<body>

<img id="image1" src="path_to_image1.jpg" style="display:none;">
<img id="image2" src="path_to_image2.jpg" style="display:none;">

<script>
function imagesAreEqual(img1, img2) {
    if (img1.width !== img2.width || img1.height !== img2.height) {
        return false;
    }

    const canvas1 = document.createElement('canvas');
    const canvas2 = document.createElement('canvas');
    canvas1.width = img1.width;
    canvas1.height = img1.height;
    canvas2.width = img2.width;
    canvas2.height = img2.height;

    const ctx1 = canvas1.getContext('2d');
    const ctx2 = canvas2.getContext('2d');

    ctx1.drawImage(img1, 0, 0);
    ctx2.drawImage(img2, 0, 0);

    const imageData1 = ctx1.getImageData(0, 0, canvas1.width, canvas1.height);
    const imageData2 = ctx2.getImageData(0, 0, canvas2.width, canvas2.height);

    if (imageData1.data.length !== imageData2.data.length) {
        return false;
    }

    for (let i = 0; i < imageData1.data.length; i++) {
        if (imageData1.data[i] !== imageData2.data[i]) {
            return false;
        }
    }

    return true;
}

window.onload = function() {
    const img1 = document.getElementById('image1');
    const img2 = document.getElementById('image2');

    if (img1.complete && img2.complete) {
        console.log(imagesAreEqual(img1, img2) ? '图片相同' : '图片不同');
    } else {
        let loadedCount = 0;
        const onLoad = () => {
            loadedCount++;
            if (loadedCount === 2) {
                console.log(imagesAreEqual(img1, img2) ? '图片相同' : '图片不同');
            }
        };
        img1.onload = onLoad;
        img2.onload = onLoad;
    }
};
</script>

</body>
</html>

可能遇到的问题及解决方法

跨域问题：如果图片来自不同的域，可能会遇到跨域资源共享（CORS）的问题。解决方法是确保图片服务器设置了适当的CORS头部，或者使用代理服务器来加载图片。
性能问题：对于大尺寸图片或大量图片的比较，直接比较像素数据可能会很慢。可以考虑先将图片缩放到较小的尺寸再进行比较，或者使用Web Workers在后台线程中进行处理以提高性能。

通过上述方法，可以有效地判断两张图片是否重复。

页面内容是否对你有帮助？

有帮助

没帮助

在safari中使用两个图像作为背景时不起作用

、

我使用两张图片作为背景图片。(两个引号标记该书签)背景:透明url(../images/quote.png) no-重复左上角，url(../images/quote2.png) no-重复右下角25px；

浏览 10提问于2013-06-20得票数 0

1回答

预加载图片会降低页面加载速度

、、、

这是可行的，但一旦检索到图像，图像就会从上到下逐步加载。我通过添加以下代码解决了这个问题...Image; d.MM_p[j++].src=a[i];}} MM_preloadImages(<%= preloadImages %> );谢谢你的建议。

浏览 3提问于2011-04-01得票数 1

回答已采纳

1回答

在列表视图中加载正确的图像

、、

我正在制作一个应用程序，可以在列表视图中显示urls中的图像。我使用异步任务获取图像并将其放入图像视图中。我目前使用的方法是在getview方法中调用asynctask。背景中的do部分从url中获取图像。我遇到的问题是，当我滚动到列表视图中的一个元素时，最初出现了错误的图像，但很快就加载了正确的图像。为什么会发生这种情况？<?

浏览 0提问于2014-02-19得票数 0

1回答

码头形象与基地形象的融合

、、、、

我想要构建一个使用NodeJs和的坞映像。如何使用两个基来创建新图像？在这种情况下，我将运行一个角应用程序，和一个Spring应用程序在同一个图像。有关于如何有这样的要求的单一图像的提示吗？说得通吗？

浏览 6提问于2017-07-25得票数 4

回答已采纳

1回答

opencv SIFT/SURF:如何判断两张图片是否匹配？

、、

我刚接触opencv的SIFT/SURF，当我用两张图片测试它时，我想知道如何判断这两张图片是否匹配。例如，我正在匹配图像A和图像B。当B只是A的旋转图像时，很容易获得匹配计数，然后获得良好匹配计数，并通过将它们相除来获得百分比。但我发现它在其他情况下不起作用:我的图像A是一张325*365的图像；我的图像B是从Iphone5拍摄的640*1136分辨率的图像A，而A不

浏览 3提问于2013-11-10得票数 2

2回答

如何给可变高度的div设置背景？

、、

刚刚完成我的大学项目，我想放置一个背景图像作为div背景。div在右手边，'main content‘区域。有什么教程吗？

浏览 1提问于2010-08-29得票数 0

回答已采纳

1回答

比较两张图片，判断里面是否有相同的物体

、、

我正在定义一个问题:我有两张照片，例如两张带有1欧元硬币的照片。我如何比较这两张图片才能得到“是的，它们都包含一枚1欧元的硬币”？当然，如果第二张图片包含一个2欧元硬币，测试应该返回false。我尝试过openCV方法，但没有这么精确的方法。此外，ML方法也不适合，因为其目标是在没有任何其他数据库的情况下识别两个图像中的两个对象。

浏览 5提问于2019-11-08得票数 0

1回答

使用基于web的asp.net应用程序突出显示两个图像之间的差异

我已经创建了简单的演示来比较两个图像。它比较两个图像，找出它们之间的差异，并使用锁定位显示在第三个图像中。但我想强调两个图像之间的区别。我怎么能做到这一点？Asp.net c#谢谢你。

浏览 1提问于2011-05-05得票数 1

1回答

微信公众号上图片点亮是如何操作的？

、

最近看见很多微信公众号的文章设置了点击图片，图片由灰色变为彩色，这个具体是如何操作的是否有人懂呢

浏览 3890提问于2020-04-10

2回答

两个div重叠

、、、

因此，我正在尝试做一些类似于()的事情，但是在我的网站顶部放置更多的东西，这将包括一些div层。所以我想要移动一个图像到顶部进行修复，然后在图像上我想把菜单的链接，以及一个音乐播放器iframe与一些现在正在播放文本旁边它… ____________________________________________________________ | [ -Log

浏览 4提问于2013-02-23得票数 0

1回答

是否可以在运行模式下在1个picturebox上显示多个图像

当我尝试用谷歌搜索3天后，我发现在1个picbox中只有1张图片/图片可用。我的目标是显示多个图像，并且它们不能重叠。如果它们重叠，则应显示红色。我使用的是VB6。但是当我在点击按钮中选择第二个图像时，picbox上的图像将自动覆盖它。是由.cls引起的吗?？最好的敬意，陈

浏览 5提问于2013-06-26得票数 0

1回答

以随机顺序重复显示两张图片

我是编程新手，因此有一个相当简单的问题。class Program static void Main(string[]

浏览 2提问于2017-01-16得票数 0

1回答

计算机视觉:窗口的形状和大小如何影响视差？

、

我希望有人能给我解释一下正方形窗口和矩形窗口如何影响视差图的计算，这里我说的是固定大小。我有两张这个物体的图片，取自SIR (随机点图案) 我需要知道如何判断垂直或水平矩形窗口比兼容的正方形窗口更好。MSE足够了吗？我是否也应该考虑图像的特征？另外，如果有人

浏览 27提问于2017-02-11得票数 0

1回答

在使用GaussianBlur和减法模糊图像之后，我得到了更多非零像素

、、

我使用cv2.countNonZero检查非零像素的数量。个非零像素，在新图像(通过减法创建)中，我可以看到所有这些像素，但是在我使用高斯模糊(cv2.GaussianBlur(image1，(3,3),0))之后，我得到了大约6000个非零像素，但新图像全是黑色的。如果我的描述不清楚，代码如下：image2 = cv2.imread(path2) gaus_image1countNonZero(cv2.cvtColor(gaus_diff,

浏览 4提问于2021-01-14得票数 0

1回答

React native onPress =更改镜像的源代码

、、

}, liked: false, ] // 2文件 import images from 'store.js

浏览 6提问于2021-10-31得票数 0

回答已采纳

1回答

WPF RichTextBox字体间距不一致

、、

我发现呈现FlowDocument的WPF RichTextBox不是所见即所得。此文档的xaml。ns0:Paragraph.Inlines> </ns0:FlowDocument.Blocks>您是否有解决此问题的解决方法

浏览 1提问于2014-09-26得票数 0

1回答

将UIImage与另一幅图像重叠

、、

可能重复：使用这2张图片，我想要创建以下效果。任何你认为掩盖这些图像以创造所需效果的技术。

浏览 3提问于2012-10-29得票数 0

1回答

使用Android-Universal- image -Loader加载缩小的图像

、

是否可以在原始图像尚未加载的情况下显示我正在加载的图像的缩小版本？

浏览 2提问于2014-08-28得票数 0

1回答

画布上图像看起来与html <img>标记中的图像不同

、、、、

但即使在裁剪图像之前，当我在画布上渲染图像时，图像看起来也是模糊的。然后我使用HTML标签渲染了相同的图像，图像并不模糊。对于画布和img标记，我都使用了300px的宽度和高度。ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height);在画布上呈现的图像如下所示：

浏览 3提问于2020-10-26得票数 0

点击加载更多