为什么2个相同的图像具有不同的dataUrl?

模糊数学

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

我使用compareimagemagick仔细检查,发现这些图像确实相同。唯一的区别是,第一个可作为文件使用,另一个可通过canvas元素使用。

我以这种方式生成了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()

请注意,这只是某些图片的问题-并非全部。上面显示的简单示例完全可以正常工作。

模糊数学

我最终创建了两个新的图像对象,然后将它们用于在另一个画布上绘制它们,并从中获得了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

}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么2个不同的python lambda具有相同的字节码?

为什么有2个目录具有相同的内容?

具有相同列表的两个变量具有不同的ID .....为什么?

为什么两个相同的列表具有不同的内存占用量?

为什么两个具有相同文本和编码但大小不同的文件?

为什么两个不同的字符具有相同的ASCII值?

为什么两个函数给出具有相同方法的不同输出?

为什么两个相同的跨度具有不同的宽度?

为什么相同的python代码具有不同的时钟时间?

为什么这些具有相同功能的方法写的不同?

为什么Prelude具有相同的功能,只是参数不同?

为什么Java相同的String具有不同的哈希码

为什么 new Date(dateString) 在具有完全相同输入的不同设备上返回两个不同的日期?

具有相同发布版本的2个不同功能分支的SNAPSHOT版本是什么

为什么在 WSO2 ESB 中我不能创建两个具有相同上下文值的不同 API?

为什么 2 个不同的字符串在 C 中有相同的地址?

为什么有2个不同的输出

为什么与==相比,具有相同日期和时间的2个时间结构返回false?

为什么在使用动态类型和动态绑定时,两个具有相同名称(属于不同类)的方法应具有相同的原型?

为什么在Python 3.6.x / 2.7.x中,两个具有相同浮点值的不同变量具有相同的id()?

为什么在同一张图像上得到了两个带有相同内核的不同特征图?

为什么相同的图像(编辑:PNG)在 Java 中产生两个略有不同的字节数组?

为什么在Gatsby的两种不同布局上无法具有两个StaticQuery元素的相同名称?

为什么两个具有相同结构和数据的表占用不同的磁盘空间?

为什么不能在 id 上加入具有不同行数的 2 个表?

以不同的顺序比较具有相同键的 2 个对象

为什么具有相同数据的列表具有不同的大小?

为什么Unicode有2个空格?有什么不同?

为什么订阅相同序列的不同可观察对象时,ReplySubject具有不同的行为?