Wie vermeide ich den Fehler „Die Leinwand wurde durch ursprungsübergreifende Daten verunreinigt' in getImageData()?

So vermeiden Sie den Fehler „Die Leinwand wurde durch ursprungsübergreifende Daten beeinträchtigt“ in getImageData()

Bei Verwendung von getImageData( )-Methode zum Abrufen von Pixeldaten von einer Leinwand verwenden, kann die Fehlermeldung „Die Leinwand wurde durch ursprungsübergreifende Daten beeinträchtigt“ auftreten. Dieser Fehler tritt auf, wenn Sie versuchen, auf Pixeldaten auf einer Leinwand zuzugreifen, die von Daten betroffen ist, die von einer anderen Domäne geladen wurden.

Um die Ursache dieses Fehlers zu verstehen, betrachten Sie die in den meisten Browsern implementierte Sicherheitssandbox. Standardmäßig beschränken Browser die Kommunikation zwischen verschiedenen Ursprüngen, was bedeutet, dass von einer Domäne geladene Daten nicht von einer anderen Domäne verwendet werden können. Wenn ein Canvas-Element mit Daten eines anderen Ursprungs kontaminiert ist, gilt es als „verunreinigt“.

Eine gängige Möglichkeit, eine Leinwand zu verunreinigen, besteht darin, ein Bild von einer Subdomain-URL zu laden, wie Sie in Ihrem Code erwähnt haben. Um diesen Fehler zu verhindern, gibt es mehrere Möglichkeiten:

1. Legen Sie das Attribut „crossOrigin“ fest

Weisen Sie dem Bildelement das Attribut „crossOrigin“ mit dem entsprechenden Wert zu:

<img src="https://subdomain.example.com/image.png" crossOrigin="Anonymous">

Dadurch kann Ihr Skript auf Pixeldaten aus dem Bild zugreifen , vorausgesetzt, der Remote-Server setzt die entsprechenden CORS-Header.

2. Stellen Sie sicher, dass CORS-Header festgelegt sind.

Stellen Sie auf dem Remote-Server, der das Bild bereitstellt, sicher, dass er die folgenden CORS-Header sendet:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type

Diese Header gewähren ursprungsübergreifenden Zugriff auf Ihr Skript und erlauben Sie ihm, Bilddaten von der Leinwand abzurufen.

3. Verwenden Sie einen Proxyserver

Wenn das Festlegen von CORS-Headern auf dem Remote-Server nicht möglich ist, können Sie einen Proxyserver verwenden, um die Cross-Origin-Beschränkung zu umgehen. Ein Proxyserver fungiert als Vermittler zwischen Ihrem Skript und dem Remote-Server und erleichtert die Übertragung von Daten zwischen verschiedenen Ursprüngen.

Durch die Implementierung einer dieser Lösungen können Sie verhindern, dass „Die Leinwand wurde durch Cross-Proxy-Server verunreinigt“. Fehler „Ursprungsdaten“ in getImageData() und Zugriff auf Pixeldaten von Bildern, die aus verschiedenen Domänen geladen wurden.

Das obige ist der detaillierte Inhalt vonWie vermeide ich den Fehler „Die Leinwand wurde durch ursprungsübergreifende Daten verunreinigt' in getImageData()?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!