Sylvain Lesage

Image

Were you able to pinpoint the cause of the differences? I imagine they relate to color profiles?

Why is the base64 conversion necessary? Can't you create a Blob from the image and derive the UUID from the binary data (e.g. via blob.text())?

Fabian Iwand

For the first point, I could not find the reason. The function is getBase64ImageThroughCanvas if you want to try, but I don't know how to manage the color profiles. Do you have references about that?

For the second point, do you mean using the following code? 

getBase64Image = src =>
  fetch(src)
    .then(r => r.arrayBuffer())
    .then(d => new Blob([d]))

It seems to work, but the generated text is something like: "`����\x00~Exif\x00\x00MM\x00*\x00\x00..." I'm not sure if it' would be a problem or not, but you're right, it finally gives a UUID as expected.

TIL, the differences in canvas output are GPU related and are actually used for browser fingerprinting: https://en.wikipedia.org/wiki/Canvas_fingerprinting

The text is the image's binary data, represented as an UTF-16 string (hence the unprintable characters).
What you probably want instead is to create a Uint8Array from the response's arrayBuffer and feed that array into uuidv5(). Note that you need to update to a more recent version, or it will complain about the TypedArray not being an array:

uuidv5 = (await import('uuid@8.3/dist/esm-browser/v5.js')).default

uuidFromSrc = (src, ns = NAMESPACE) => fetch(src)
  .then(r => r.arrayBuffer())
  .then(buf => uuidv5(new Uint8Array(buffer), ns))

Excellent, thanks a lot. I adapted the code and texts with your inputs.

Purpose-built for displays of data