Why 2 identical images have different dataUrls?

Question

I have 2 images both generated via javascript canvas. I want to check if both images are identical. For this I generated a set of images and saved them as png files. I then tried to compare the dataUrls of both, the previously generated image and the new generated image. But the dataUrls are different. Why is that so?

I used compare from imagemagick to doublecheck, that this images are really the same. The only difference is, that the first is available as file and the other is available via a canvas element.

I generated the dataUrls this way:

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

Note, that this is only an issue for some pictures - not for all. The simple example shown above totally works.

is this the full code? to me it looks like `canvas.toDataURL() === canvas.toDataURL()` as nothing happens in between those two lines — vitr, Aug 20 '16 at 09:08
The comments seperate 2 different code segments which only show how I get the dataUrls from the one image and from the other image. Since the first image is a REAL image I have to draw it on a canvas first. The second is already drawn on another canvas. But a differnt one — Fuzzyma, Aug 20 '16 at 09:14
The content of an image can be (lossless) compressed in different ways, so the final data of an png can be different, even if the image data (the pixel colours) itself is equal. — t.niese, Aug 20 '16 at 09:26
they are both generated in the same way. I can even rightclick and save the generated image and use it as first image for comparison. They still differ. You see: The way HOW i draw the canvas is not really relevant. @t.niese they are both drawn on a canvas. I would think that identical images lead to same compression (its not a random algo after all) — Fuzzyma, Aug 20 '16 at 09:29
Two identical images will both create the same dataURLs. The only way you can get different URLs is if both canvas have differing pixels. The code you have shown does not provide the information needed to work out what the problem is. — Blindman67, Aug 20 '16 at 10:32
post the full source code, it's relevant how you draw the images — vitr, Aug 20 '16 at 10:40
there you have your example code. As I said: It doenst help. I generate many pictures with many different parameters. Some work and some do not work — Fuzzyma, Aug 21 '16 at 12:25
When rendering .png images, browsers are allowed to take original .png's and gamma-correct them and also pre-multiply their alphas. This might be causing your difference between original .png and the resulting canvas-drawn dataURL — markE, Aug 21 '16 at 16:13

score 0 · Accepted Answer · answered Aug 21 '16 at 13:59

I ended up creating two new image objects which I then used to draw them on another canvas from which I got the dataUrl - They finally matched then!

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

}

Why 2 identical images have different dataUrls?

1 Answers1