javascript - Cross-origin canvas tainted by local image

Question

I'm creating an image on a local file and rendering on a canvas, however when I try to getImageData from it I get the error:

The canvas has been tainted by cross-origin data.

I searched about it but I found only server side solutions. I even tryied to add img.crossOrigin ='Anonymous', img.crossOrigin ='Anonymous' or img.setAttribute('crossOrigin', '') but nothing worked.

By the way, this is the code:

async function start(){
    createCanvas(0,0);
    let img = await loadImage('./cat.jpeg');
    canvasResize(img.width / 2, img.height / 2);

    image(img, null, null, null, null, 0, 0, canvas.width, canvas.height);

    canvasImage = canvasGetPixels();
    [...]
}

async function loadImage(src){
    return new Promise((resolve) => {
        const img = new Image();
        img.src = src;
        img.onload = function() {
            resolve(this);
        };
    });
}

* Using vanilla javascript and Chrome version 88

question from:https://stackoverflow.com/questions/65838479/cross-origin-canvas-tainted-by-local-image

Answer 1

Waitting for answers