Error: Pica: cannot use getImageData on canvas, make sure fingerprinting protection isn't enabled

Question

I am trying to use pica (//cdn.jsdelivr.net/gh/nodeca/pica/dist/pica.js) in my service-worker using the following code, but get the error Error: Pica: cannot use getImageData on canvas, make sure fingerprinting protection isn't enabled when I call pica.resize():

(file was sourced from a UI )

service-worker.js:

    const imageBitmap = await createImageBitmap(file);
    const { newWidth, newHeight } = getNewDimensions(imageBitmap.width, imageBitmap.height, maxWidth, maxHeight);

    const picaCanvas = new OffscreenCanvas(newWidth, newHeight);
    picaCanvas.width = newWidth;
    picaCanvas.height = newHeight;
    const picaCtx = picaCanvas.getContext('2d');
    picaCtx.drawImage(imageBitmap, 0, 0, newWidth, newHeight);

    const resizingCanvas = new OffscreenCanvas(newWidth, newHeight);
    const resizer = pica({ features: ['wasm', 'ww'] });

    await resizer.resize(picaCanvas, resizingCanvas, { // <------ ERROR OCCURS HERE
        quality: 3 //  [0='box', 1='hamming', 2='lanczos2', 3='lanczos3']
    });

The code is creating the [OffscreenCanvas]Canvas so why do I get a fingerprint error - and how I work around this (remembering that this is coming from a service-worker)?

(Note, this is on a PWA on Android - so using Chrome 126.0.0.0)

Answer 1

Ok - I think the fix is to change the const resizer line to:

const resizer = pica({
                  features    : ['wasm', 'ww'],
                  createCanvas: (w, h) => new OffscreenCanvas(w, h)
                });

(otherwise the createCanvas creates a canvas)