为什么 2 个相同的图像具有不同的 dataUrls?
Why 2 identical images have different dataUrls?
我有 2 张图像都是通过 javascript canvas 生成的。
我想检查两个图像是否相同。
为此,我生成了一组图像并将它们保存为 png 文件。
然后我尝试比较之前生成的图像和新生成的图像的 dataUrls。但是 dataUrls 是不同的。为什么会这样?
我用 compare
来自 imagemagick 来仔细检查,这些图像真的是一样的。唯一的区别是,第一个作为文件提供,另一个通过 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()
请注意,这只是部分图片的问题 - 并非全部。上面显示的简单示例完全有效。
我最终创建了两个新的图像对象,然后我用它们在另一个 canvas 上绘制它们,我从中获得了 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
}
我有 2 张图像都是通过 javascript canvas 生成的。 我想检查两个图像是否相同。 为此,我生成了一组图像并将它们保存为 png 文件。 然后我尝试比较之前生成的图像和新生成的图像的 dataUrls。但是 dataUrls 是不同的。为什么会这样?
我用 compare
来自 imagemagick 来仔细检查,这些图像真的是一样的。唯一的区别是,第一个作为文件提供,另一个通过 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()
请注意,这只是部分图片的问题 - 并非全部。上面显示的简单示例完全有效。
我最终创建了两个新的图像对象,然后我用它们在另一个 canvas 上绘制它们,我从中获得了 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
}