Canvas + CrossOrigin Anonym + CORS + Chrile + Mac OSX

Question

Zum Zwecke der Laden von Bildern auf eine Leinwand, ich benutze diese Methode =>

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)); 
    }); 

Nach viel zu untersuchen, fand ich heraus, dass ich dies encoutring Fehler: https://bugs.chromium.org/p/chromium/issues/detail?id=409090

In der Tat werden zufällig Bilder im Moodboard nicht angezeigt.

Ich habe den Code nicht geschrieben, daher bin ich mir nicht sicher über die Notwendigkeit dieser Linie, was wäre der Unterschied mit oder ohne?

image.crossOrigin = 'Anonymous'; 

UPDATE 1

Als ich die image.crossOrigin = 'Anonymous'; das Laden Bild entfernen hat nicht CORS Problem mehr, aber dann bekomme ich diesen Fehler, wenn die canvas.toDataURL('image/png') auf der Leinwand zu verwenden versuchen

Uncaught DOMException: Fehler beim Ausführen von 'toDataURL' unter 'HTMLCanvasElement': Beschädigte Canvases werden möglicherweise nicht exportiert.

Answer 1

Wenn Sie Ihre Bilder aus einer anderen Domäne stammen, und Sie wollen in der Lage sein die Leinwand Inhalt zu exportieren, nachdem Sie diese Bilder haben ziehen, dann haben Sie keine andere Wahl, als sie mit dem crossOrigin Attribute zu laden.

Wenn Sie wirklich mit dem verknüpften Fehler konfrontiert sind, ist die richtige Lösung, die CORS-Header immer von Ihrer Serverantwort zu senden, unabhängig davon, ob die Anforderung mit dem Origin-Header erfolgt.

Und eine schnelle Abhilfe besteht darin, den Cache zu vermeiden, indem Sie eine zufällige Abfragezeichenfolge im src des Bildes anfügen (img.src = url + '?v=' + Math.random();).