Warum gibt mein Canvas „drawImage()' leere Daten zurück oder kann nicht gerendert werden, und wie kann ich das Problem mit „onload' und CORS beheben?

CanvasContext2D drawImage()-Rätsel: Onload und CORS

Beim Versuch, ein Bild auf eine Leinwand zu malen, bevor die Daten-URL abgerufen wird, kann es bei Benutzern zu einem Problem kommen, bei dem die zurückgegebene Die Daten erscheinen leer und ähneln einer mit „A“-Zeichen gefüllten Zeichenfolge. Darüber hinaus kann es vorkommen, dass das Bild beim Anhängen der Leinwand an das Dokument nicht gerendert wird, während in der Konsole keine Fehler gemeldet werden.

Problemlösung

Die Ursache des Problems liegt in der asynchronen Natur des Bildes Laden. Um es zu beheben, muss man den Onload-Ereignishandler des verwenden. Element, um den Malvorgang erst auszuführen, nachdem das Bild vollständig geladen wurde.

// 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 und Datenabruf

Damit die Methoden context.toDataURL() und context.getImageData ordnungsgemäß funktionieren, muss das Bild Die Ressource muss Cross-Origin-konform abgerufen werden. Andernfalls wird die Leinwand „verdorben“ und blockiert jeden Versuch, Pixeldaten abzurufen.

Wenn das Bild vom selben Server stammt wie Ihr Skript, gibt es keine Probleme. Wenn sich das Bild jedoch auf einem externen Server befindet, muss unbedingt sichergestellt werden, dass der Server einen ursprungsübergreifenden Zugriff zulässt, indem entsprechende CORS-Header festgelegt werden. Darüber hinaus sollte die img.crossOrigin-Eigenschaft entweder auf „use-credentials“ für authentifizierte Anfragen oder auf „anonymous“ für anonyme Anfragen gesetzt werden.

Es ist wichtig zu beachten, dass CORS-Header auf der Serverseite festgelegt werden. Das Cross-Origin-Attribut gibt nur die Absicht des Clients an, über CORS auf die Bilddaten zuzugreifen. Das Umgehen von CORS-Einschränkungen ist nicht möglich, wenn die Serverkonfiguration dies verbietet.

In bestimmten Szenarien werden einige Bilder möglicherweise auf Ihrem Server gehostet, während andere möglicherweise CORS erfordern. Um dies zu bewältigen, sollten Sie die Verwendung des onerror-Ereignishandlers in Betracht ziehen, der ausgelöst wird, wenn das Cross-Origin-Attribut auf einem Server, der CORS nicht unterstützt, auf „anonym“ gesetzt ist.

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

img.addEventListener("error", corsError, false);

Das obige ist der detaillierte Inhalt vonWarum gibt mein Canvas „drawImage()' leere Daten zurück oder kann nicht gerendert werden, und wie kann ich das Problem mit „onload' und CORS beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!