Warum ist mein Canvas drawImage() leer oder mit „A's gefüllt und wie kann ich CORS-Probleme beim Zeichnen externer Bilder beheben?

CanvasContext2D drawImage() Problem: Bild und CORS-Konfiguration laden

Wenn ein Bild auf eine Leinwand gemalt wird, bevor seine Daten-URL abgerufen wird, kann ein Problem auftreten entstehen, wenn die zurückgegebenen Daten leer sind und zahlreiche „A“-Zeichen enthalten. Darüber hinaus wird das Bild möglicherweise nicht gezeichnet, wenn die Leinwand an das Dokument angehängt wird.

Lösung: Bildereignis laden

Um dieses Problem zu beheben, müssen Sie unbedingt warten bis das Bild geladen ist, bevor Sie versuchen, es auf die Leinwand zu malen. Nutzen Sie den Load-Event-Handler des 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";

CORS-Konfiguration für Pixeldatenzugriff

Eine weitere mögliche Ursache ist eine Einschränkung, die als „Tainting“ der Leinwand bekannt ist. Um dieses Problem zu lösen, ist eine korrekte CORS-Konfiguration (Cross-Origin Resource Sharing) unerlässlich.

• Bilder gleicher Herkunft:Kein Problem.
• Extern Bilder: Stellen Sie sicher, dass der Server in seinen Headern Cross-Origin-Zugriff zulässt und setzen Sie img.crossOrigin auf „use-credentials.“
• Anonyme Anfragen:Setzen Sie img.crossOrigin auf „anonymous“, wenn der Server anonymen Zugriff zulässt.

Hinweis: CORS-Header werden vom Server gesteuert. Das Cross-Origin-Attribut weist lediglich auf den Wunsch hin, CORS zu verwenden. Die ordnungsgemäße Serverkonfiguration kann nicht umgangen werden.

Randfall: Gemischte Bildquellen

Wenn Bilder sowohl von Ihrem Server als auch von CORS-fähigen Servern stammen, sollten Sie die Verwendung des onerror-Ereignisses in Betracht ziehen Handler zur Verarbeitung von Nicht-CORS-Bildern.

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

Das obige ist der detaillierte Inhalt vonWarum ist mein Canvas drawImage() leer oder mit „A's gefüllt und wie kann ich CORS-Probleme beim Zeichnen externer Bilder beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!