Pourquoi mon canevas `drawImage()` renvoie-t-il des données vides ou ne parvient-il pas à restituer, et comment puis-je le réparer en utilisant `onload` et CORS ?

CanvasContext2D drawImage() Énigme : Onload et CORS

En tentant de peindre une image sur un canevas avant de récupérer son dataURL, les utilisateurs peuvent rencontrer un problème où le retour les données apparaissent vides, ressemblant à une chaîne remplie de caractères « A ». De plus, l'ajout du canevas au document peut ne pas parvenir à restituer l'image, alors qu'aucune erreur n'est signalée dans la console.

Résolution du problème

La racine du problème réside dans la nature asynchrone de l'image. chargement. Pour le résoudre, il faut utiliser le gestionnaire d'événements onload du élément pour exécuter l'opération de peinture uniquement une fois le chargement de l'image terminé.

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

// Define a function to execute after the image has loaded
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);

  // Now you can retrieve the dataURL
  var dataURL = canvas.toDataURL();
  doSomething(dataURL);
};

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

CORS et récupération de données

Pour que les méthodes context.toDataURL() et context.getImageData fonctionnent correctement, l'image la ressource doit être récupérée d’une manière compatible avec toutes les origines. Sinon, le canevas devient « entaché », bloquant toute tentative de récupération de données de pixels.

Si l'image provient du même serveur que votre script, il n'y a aucun problème. Cependant, si l'image réside sur un serveur externe, il est crucial de s'assurer que le serveur autorise l'accès multi-origine en définissant les en-têtes CORS appropriés. De plus, la propriété img.crossOrigin doit être définie sur « use-credentials » pour les demandes authentifiées ou sur « anonymous » pour les demandes anonymes.

Il est important de noter que les en-têtes CORS sont définis côté serveur. L'attribut d'origine croisée indique uniquement l'intention du client d'accéder aux données d'image à l'aide de CORS. Contourner les restrictions CORS n'est pas possible si la configuration du serveur l'interdit.

Dans certains scénarios, certaines images peuvent être hébergées sur votre serveur tandis que d'autres peuvent nécessiter CORS. Pour gérer cela, envisagez d'utiliser 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!