为什么 2 个相同的图像具有不同的 dataUrls？答案

【问题标题】：Why 2 identical images have different dataUrls?为什么 2 个相同的图像具有不同的 dataUrls？
【发布时间】：2016-12-27 09:39:21
【问题描述】：

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

我使用 imagemagick 中的compare 来仔细检查，这些图像真的是一样的。唯一的区别是，第一个可作为文件使用，而另一个可通过画布元素使用。

我以这种方式生成了 dataUrls：

// 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()

请注意，这只是某些图片的问题 - 并非全部。上面显示的简单示例完全有效。

【问题讨论】：

这是完整的代码吗？对我来说，它看起来像 canvas.toDataURL() === canvas.toDataURL()，因为这两行之间没有发生任何事情
cmets 分隔 2 个不同的代码段，它们仅显示我如何从一个图像和另一个图像中获取 dataUrls。由于第一张图像是真实图像，因此我必须先将其绘制在画布上。第二个已经绘制在另一个画布上。但不一样
很高兴看到你如何绘制第二张图片？
图像的内容可以以不同的方式（无损）压缩，因此即使图像数据（像素颜色）本身相同，png 的最终数据也可能不同。跨度>
它们都以相同的方式生成。我什至可以右键单击并保存生成的图像并将其用作第一张图像进行比较。他们还是有区别的。你看：我如何绘制画布的方式并不真正相关。 @t.niese 他们都画在画布上。我认为相同的图像会导致相同的压缩（毕竟它不是随机算法）

标签： javascript html5-canvas data-uri todataurl

【解决方案1】：

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

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

}

【讨论】：