Javascript 为什么两个相同的图像具有不同的数据URL？

我有两个图像都是通过javascript画布生成的。 我想检查两个图像是否相同。 为此，我生成了一组图像并将它们保存为png文件。 然后，我尝试比较这两种图像的数据URL，即先前生成的图像和新生成的图像。但是数据URL是不同的。为什么会这样

我使用了从imagemagick到doublecheck的

比较

，以确保这些图像实际上是相同的。唯一的区别是，第一个可以作为文件使用，另一个可以通过canvas元素使用

我是这样生成数据URL的：

// first image: available as file:
<img src="image.png"> // var img = ...
var canvas1 = document.createElement('canvas')
canvas1.width = img.width
canvas1.height = img.height
canvas1.getContext('2d').drawImage(img,0,0)
canvas1.toDataURL()

// second image generated on canvas
canvas2.width = 500
canvas2.height = 500
canvas2.getContext('2d').rect(20,20,150,100);
canvas2.toDataURL()

//第一个图像：作为文件提供：
//变量img=。。。
var canvas1=document.createElement（'canvas'）
画布1.width=img.width
canvas1.height=img.height
canvas1.getContext（'2d'）.drawImage（img，0,0）
canvas1.toDataURL（）
//画布上生成的第二个图像
画布2.0宽度=500
画布2.2高度=500
canvas2.getContext（'2d'）.rect（20,20150100）；
canvas2.toDataURL（）

---

请注意，这只是一些图片的问题，而不是所有图片的问题。上面显示的简单示例完全有效。

我最终创建了两个新的图像对象，然后用它们在另一个画布上绘制，从中我获得了数据URL——它们最终匹配了

var imageToCanvas = function (img) {
    var canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    canvas.getContext('2d').drawImage(img, 0, 0)
    return canvas
}

let img1 = document.createElement('img')
let img2 = document.createElement('img')

let one, two

img1.onload = function(){
    one = imageToCanvas(img1)
    cb()
}

img2.onload = function(){
    two = imageToCanvas(img2)
    cb()
}

img1.src = canvas.toDataURL() // my images generated with the same parameters like the reference images
img2.src = images[i].src // my pregenerated reference images

let cb = function(){
    if(!one || !two) return

    console.log(one.toDataURL(),two.toDataURL()) // the same

}

---

这是完整的密码吗？对我来说，它看起来像是canvas.toDataURL（）==canvas.toDataURL（），因为这两行之间没有发生任何事情。注释将两个不同的代码段分开，这两个代码段仅显示我如何从一个图像和另一个图像获取数据URL。因为第一个图像是真实的图像，我必须先在画布上绘制它。第二个已在另一个画布上绘制。但是如果你能用不同的方法来绘制第二幅图像，那就好了。图像的内容可以用不同的方式（无损）压缩，因此png的最终数据可以不同，即使图像数据（像素颜色）本身是相等的。它们都是以相同的方式生成的。我甚至可以右键单击并保存生成的图像，并将其用作第一个图像进行比较。他们仍然存在分歧。你看：我画画布的方式其实并不相关@t、 侄女：他们都画在画布上。我认为相同的图像会导致相同的压缩（毕竟这不是一个随机算法）