Canvas + CrossOrigin Anonymous + CORS + Chrile + Mac OSX

To upload images to the canvas, I use this method =>

const load = (url: string) =>
    new Promise((resolve, reject) => {
        const image = new Image();

        if (!image) reject();

        image.crossOrigin = 'Anonymous';
        image.src = url;

        image.addEventListener('load', () => resolve(image));
        image.addEventListener('error', err => reject(err));
    });

After much research, it turned out that I am blocking this error: https://bugs.chromium.org/p/chromium/issues/detail?id=409090

Indeed, random pictures are not displayed on the layout panel.

I haven't written the code, so I'm not sure if this line is needed, what's the difference with or without it?

image.crossOrigin = 'Anonymous';

UPDATE 1

When I delete image.crossOrigin = 'Anonymous';, loading the image no longer has a problem with CORS, but then I get this error when trying to use canvas.toDataURL('image/png')on canvas

DOMException failed: 'toDataURL' failed in 'HTMLCanvasElement': shadow canvases may not be exported.

0
1

, , crossOrigin.

, , , CORS , , Origin.

- , src (img.src = url + '?v=' + Math.random();).

+1

Source: https://habr.com/ru/post/1623140/


All Articles