Pourquoi mon Canvas drawImage() est-il vide ou rempli de « A », et comment puis-je résoudre les problèmes CORS lors du dessin d'images externes ?

CanvasContext2D drawImage() Problème : charger l'image et la configuration CORS

Lors de la peinture d'une image sur un canevas avant de récupérer son dataURL, un problème peut surviennent lorsque les données renvoyées sont vides et contiennent de nombreux caractères « A ». De plus, l'image peut ne pas être dessinée lorsque le canevas est ajouté au document.

Solution : Charger l'événement d'image

Pour résoudre ce problème, il est crucial d'attendre jusqu'à ce que l'image soit chargée avant d'essayer de la peindre sur la toile. Utilisez le gestionnaire d'événements de chargement du element :

var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  // ... code to draw the image and retrieve dataURL ...
};
img.src = "http://somerandomWebsite/picture.png";

Configuration CORS pour l'accès aux données de pixels

Une autre cause potentielle est une restriction connue sous le nom de « contamination » du canevas. Pour surmonter cela, une configuration CORS (Cross-Origin Resource Sharing) correcte est essentielle.

• Images de même origine :Pas de problème.
• Externe images : Assurez-vous que le serveur autorise l'accès multi-origine dans ses en-têtes et définissez img.crossOrigin sur "use-credentials."
• Demandes anonymes : Définissez img.crossOrigin sur "anonymous" si le serveur autorise l'accès anonyme.

Remarque : Les en-têtes CORS sont contrôlés par le serveur. L'attribut cross-origin indique simplement le désir d'utiliser CORS. Il ne peut pas contourner la configuration appropriée du serveur.

Cas limite : sources d'images mixtes

Si les images proviennent à la fois de votre serveur et de serveurs compatibles CORS, envisagez d'utiliser l'événement onerror gestionnaire pour gérer les images non CORS.

function corsError() {
  this.crossOrigin = '';
  this.src = '';
  this.removeEventListener('error', corsError, false);
}
img.addEventListener('error', corsError, false);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!