Visual comparison for HTML5 canvas and a golden image

[shumash]

I am new to cypress, and need to accomplish the following in my test:

1. load a golden image from file
2. get image from the canvas element (I know how to do it in client side JS, not cypress)
3. resize the canvas image to golden image proportions
4. run pixelwise comparison

For 2, I tried the following:

cy.get('#mesh-view0 canvas')
        .then(($el) => $el.get(0))
        .invoke('toDataURL')
        .then(dataurl => Cypress.Blob.canvasToBlob(dataurl))
        .then(blob => Cypress.Blob.blobToArrayBuffer(blob));

However, the canvas element returned in $(el).get(0) has no standard toDataURL method. I printed its properties and it is not available. Running this in the console works: $("#mesh-view0 canvas")[0].toDataURL(). What am I doing wrong?

For 3, I tried using the sharp image library, but it is not loading pointing me to custom scripts to webloaders and webpack. Is there something I can install via npm and use for resizing an image and accessing its raw RGB data without custom configurations? This seems a basic operation for many tests.

Please suggest how I might solve this.

[bahmutov]

Are you trying to save the canvas as an image file?

…

Sent from my iPhone

On Feb 20, 2021, at 21:35, Maria Shugrina ***@***.***> wrote:  I am new to cypress, and need to accomplish the following in my test: load a golden image from file get image from the canvas element (I know how to do it in client side JS, not cypress) resize the canvas image to golden image proportions run pixelwise comparison For 2, I tried the following: cy.get('#mesh-view0 canvas') .then(($el) => $el.get(0)) .invoke('toDataURL') .then(dataurl => Cypress.Blob.canvasToBlob(dataurl)) .then(blob => Cypress.Blob.blobToArrayBuffer(blob)); However, the canvas element returned in $(el).get(0) has no standard toDataURL method. I printed its properties and it is not available. Running this in the console works: $("#mesh-view0 canvas")[0].toDataURL(). What am I doing wrong? For 3, I tried using the sharp image library, but it is not loading pointing me to custom scripts to webloaders and webpack. Is there something I can install via npm and use for resizing an image and accessing its raw RGB data without custom configurations? This seems a basic operation for many tests. Please suggest how I might solve this. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[shumash]

I do not need to save it to file; just load the canvas image into a format that can be used for resizing and comparison within the cypress test. See 2-4 above. If the solution to the above is to first save canvas to file, then compare, that works as well.

[bahmutov]

How do you compare the canvas pixels in the test if you don’t save it to file?

…

Sent from my iPhone

On Feb 21, 2021, at 08:56, Maria Shugrina ***@***.***> wrote:  I do not need to save it to file; just load the canvas image into a format that can be used for resizing and comparison within the cypress test. See 2-4 above. If the solution to the above is to first save canvas to file, then compare, that works as well. — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[shumash]

I already have a golden image saved. I am asking about how to actually use this in the test to compare the actual image in the canvas to the golden one saved. How do I get RGB data of the canvas during the test? Even this obvious point raises issues (see code block above). In pseudocode, this is what I need:

golden = loadImage('golden.png');
actual = getImage($('mycanvas-selector'));  // HOW?
actual = resize(actual, golden.size);  // HOW?
difference = compare(actual, golden);  // If I have raw RGB data, this is easy
assert difference < threshold;