Pourquoi mon CanvasContext2D drawImage() échoue-t-il et comment puis-je résoudre les problèmes de CORS et de chargement d'image ?

CanvasContext2D drawImage() Problème : chargement d'image et CORS

Lorsque vous essayez de dessiner une image sur un canevas avant d'acquérir son dataURL, vous rencontrez un une URL de données vide ou un rendu de toile vierge peuvent être un problème. Cela peut être attribué à un problème de timing et à des problèmes de partage de ressources d'origine croisée (CORS).

Pour résoudre le problème de timing, l'image doit être complètement chargée avant d'essayer de la dessiner sur le canevas. Utilisez le gestionnaire d'événements onload comme suit :

// Create a new image
var img = new Image();

// Define a function to execute when the image loads
img.onload = function () {
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var context = canvas.getContext('2d');
  context.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL();
  // Now, the dataURL is available for processing
  doSomething(dataURL);
};

// Set the image source
img.src = "http://somerandomWebsite/picture.png";

De plus, pour garantir la fonctionnalité de context.toDataURL() et context.getImageData() dans le contexte du canevas, les images doivent être acquises d'une manière conforme à CORS. pour éviter de "contaminer" le canevas.

• Si l'image est hébergée sur le même serveur que le code, il n'y a pas problème.
• Pour les images provenant de serveurs externes, assurez-vous que le serveur autorise les requêtes d'origine croisée dans ses en-têtes et définissez l'attribut img.crossOrigin sur "use-credentials".
• Si le serveur autorise l'anonymat. demandes, définissez img.crossOrigin sur "anonyme".

Il est crucial de noter qu'un en-tête CORS est généré par le serveur. L'attribut d'origine croisée informe uniquement le serveur que CORS est souhaité pour la récupération des données d'image ; il ne peut pas contourner les restrictions CORS si le serveur n'est pas correctement configuré.

Dans certains cas, les images peuvent provenir de différentes sources, notamment de votre serveur et des serveurs compatibles CORS. Dans ces situations, utilisez le gestionnaire d'événements onerror, qui est déclenché lorsque l'attribut cross-origin est défini sur « anonyme » sur un serveur qui ne prend pas en charge 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!