Canvas + CrossOrigin Anonyme + CORS + Chrile + Mac OS X

Question

Aux fins de chargement des images à une toile, j'utiliser cette méthode =>

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

Après avoir étudié beaucoup, je trouve que je suis encoutring ce bug: https://bugs.chromium.org/p/chromium/issues/detail?id=409090

En effet, les images aléatoires ne sont pas montrées dans le moodboard.

Je n'ai pas écrit le code, donc je ne suis pas sûr de la nécessité de cette ligne, quelle serait la différence avec ou sans elle?

image.crossOrigin = 'Anonymous'; 

MISE À JOUR 1

Lorsque je retire le image.crossOrigin = 'Anonymous'; le chargement d'image n'a pas problème CORS plus mais je reçois cette erreur lorsque vous essayez d'utiliser le canvas.toDataURL('image/png') sur la toile

DOMException non interceptée: impossible d'exécuter 'toDataURL' sur 'HTMLCanvasElement': Les canevas endommagés ne peuvent pas être exportés.

Answer 1

Si vos images proviennent d'un autre domaine, et vous voulez être en mesure d'exporter le contenu de la toile après que vous avez fait dessiner ces images, alors vous avez pas d'autre choix que de les charger avec l'attribut crossOrigin. Si vous êtes vraiment confronté au bogue lié, selon lui, le correctif approprié est d'envoyer toujours les en-têtes CORS de votre réponse du serveur, que la demande soit faite ou non avec l'en-tête Origin.

Et une solution de contournement rapide consiste à éviter le cache, en ajoutant une chaîne de requête aléatoire dans le src de l'image (img.src = url + '?v=' + Math.random();).