Hier sind einige fragenbasierte Titel, die zum Artikelinhalt passen: * Wie behebe ich „Tainted Canvas'-Fehler bei der Verwendung von „getImageData()' mit Cross-Origin-Bildern? * Warum kann ich „getImageD' nicht verwenden?

Fehlerbehebung bei getImageData()-Fehler: Tainted Canvas von Cross-Origin-Daten

Hintergrund:

Sie stoßen auf den Fehler „ Nicht erfasster Sicherheitsfehler: „getImageData“ konnte nicht auf „CanvasRenderingContext2D“ ausgeführt werden: „Die Leinwand wurde durch Cross-Origin-Daten beschädigt“, wenn .getImageData() auf einer Leinwand mit einem Bild von einer Cross-Origin-URL verwendet wurde.

Problem:

Das „Cross-Origin“-Problem entsteht, weil sich die Domäne des Bildes von der aktuellen Domäne unterscheidet. Diese Sicherheitsmaßnahme verhindert den unbefugten Zugriff auf Ressourcen aus anderen Domänen.

Lösung:

Um das Problem zu beheben, können Sie verhindern, dass die Leinwand verunreinigt wird, indem Sie den CrossOrigin des Bildes festlegen Eigenschaft auf „Anonymous“:

var img = new Image();
img.crossOrigin = "Anonymous"; // Prevents tainting
img.src = "https://cross-origin-image.example.com/image.jpg";

Serverseitige Konfiguration:

Darüber hinaus muss der Remote-Server, der das Image hostet, den folgenden Header festlegen:

Access-Control-Allow-Origin: *

Dieser Header gewährt Zugriff auf das Bild von jedem Ursprung und ermöglicht das Laden in die Leinwand, ohne es zu beeinträchtigen.

Beispiel:

Die Die Dropbox-Dateiauswahl legt bei Verwendung der Option „Direkter Link“ die entsprechenden Header „crossOrigin“ und „Access-Control-Allow-Origin“ fest. Dadurch kann Javascript-Code Bilder aus Dropbox abrufen und sie in einer Leinwand in einer anderen Domäne bearbeiten.

Das obige ist der detaillierte Inhalt vonHier sind einige fragenbasierte Titel, die zum Artikelinhalt passen: * Wie behebe ich „Tainted Canvas'-Fehler bei der Verwendung von „getImageData()' mit Cross-Origin-Bildern? * Warum kann ich „getImageD' nicht verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!