Warum schlägt mein CanvasContext2D drawImage() fehl und wie kann ich CORS- und Bildladeprobleme beheben?

CanvasContext2D drawImage() Problem: Laden von Bildern und CORS

Beim Versuch, ein Bild auf einer Leinwand zu zeichnen, bevor die Daten-URL abgerufen wird, tritt ein Fehler auf Eine leere Daten-URL oder die Darstellung einer leeren Leinwand kann ein Problem sein. Dies kann auf ein Timing-Problem und Bedenken hinsichtlich Cross-Origin Resource Sharing (CORS) zurückgeführt werden.

Um das Timing-Problem zu beheben, muss das Bild vollständig geladen sein, bevor versucht wird, es auf die Leinwand zu zeichnen. Verwenden Sie den Onload-Ereignishandler wie folgt:

// 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";

Um außerdem die Funktionalität von context.toDataURL() und context.getImageData() im Canvas-Kontext sicherzustellen, müssen Bilder auf CORS-kompatible Weise erfasst werden um eine „Verunreinigung“ der Leinwand zu vermeiden.

• Wenn das Bild auf demselben Server wie der Code gehostet wird, gibt es keine Problem.
• Stellen Sie bei Bildern von externen Servern sicher, dass der Server ursprungsübergreifende Anforderungen in seinen Headern zulässt, und setzen Sie das Attribut img.crossOrigin auf „use-credentials“.
• Wenn der Server anonyme Anfragen zulässt Anfragen, setzen Sie img.crossOrigin auf „anonymous“.

Es ist wichtig zu beachten, dass ein CORS-Header von generiert wird Server. Das Cross-Origin-Attribut informiert den Server lediglich darüber, dass CORS für den Abruf von Bilddaten gewünscht ist; CORS-Einschränkungen können nicht umgangen werden, wenn der Server nicht ordnungsgemäß konfiguriert ist.

In einigen Fällen können Bilder aus verschiedenen Quellen stammen, einschließlich Ihres Servers und CORS-kompatiblen Servern. Verwenden Sie in diesen Situationen den onerror-Ereignishandler, 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 schlägt mein CanvasContext2D drawImage() fehl und wie kann ich CORS- und Bildladeprobleme beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!