Context :
Developing tests for a library generating complex images with canvas (see example image). An exact image match (by the pixel) is needed. I am trying to automate the regression tests on the library.
sample generated image
Question : should I try further or is there a documented imprecision of the “difference” blend mode ?
Process :
STAGE A. STORE VALID DATA
- generate a canvas with the code to test, using a set of generation parameters.
- store resulting image data as a png in the filesystem.
STAGE B. GENERATE NEW DATA
- code evolves, there is a need to retest.
- generate again, with same parameters as in A.1. above.
STAGE C. COMPARE A and B DATA
- create a new canvas (or clone the generated one.)
- put the last generation data in the new canvas.
- set the mix-blend-mode of the new canvas to “difference”.
- load a new image (async/await) with the reference generation data (from step 2.)
- put the reference generation image (from step 2) in the new canvas.
- check the resulting image data (each pixel data should be 0 for RGB or 255 for alpha) :
function pixelDataIsEmpty(value, index){
return (value !== 0) && (!((value == 255) && ((index + 1) % 4 == 0)));
}
Problem :
Some ghost differences are generated, despite imageData for A & B look identical by the pixel when echoed in the console .
Very oddly, this happens only because of step C.1-2. When applied directly the new canvas generated in B.2., the exact same function works, the difference blend behaves nicely.