Warum löst „canvas.toDataURL()' eine Sicherheitsausnahme bei Cross-Origin-Bildern aus?

Warum löst canvas.toDataURL() beim Abrufen von Cross-Origin-Bildern eine Sicherheitsausnahme aus?

Beim Versuch, canvas.toDataURL( auszuführen ) auf einem HTML5-Canvas-Element, das ein aus einer Cross-Origin-Quelle abgerufenes Bild enthält, kann es zu einem Fehler „SECURITY_ERR: DOM Exception 18“ kommen. Dies geschieht aufgrund von Sicherheitsbeschränkungen durch Webbrowser.

Gemäß der HTML5-Spezifikation löst die toDataURL()-Methode eine SECURITY_ERR-Ausnahme aus, wenn sie für ein Canvas-Element aufgerufen wird, dessen „origin-clean“-Flag falsch ist. Dieses Flag wird auf „true“ gesetzt, wenn das Canvas-Element nur Ressourcen desselben Ursprungs enthält wie das Dokument, in dem es sich befindet. Da das Bild in Ihrem Fall aus einer anderen Domäne stammt, ist das Flag „origin-clean“ auf „false“ gesetzt.

Problemumgehung:

Leider aufgrund von Aufgrund dieser Sicherheitsbeschränkungen ist es nicht möglich, toDataURL() zum Abrufen einer PNG-Darstellung eines Cross-Origin-Bildes zu verwenden. Um dieses Problem zu lösen, ziehen Sie die folgenden Optionen in Betracht:

• Verwenden Sie einen CORS-fähigen Proxy: Richten Sie einen serverseitigen Proxy ein, der Cross-Origin Resource Sharing (CORS) ermöglicht. Dadurch können Sie ursprungsübergreifende Anfragen stellen und die Sicherheitsbeschränkung umgehen.
• Verwenden Sie die HTML5-Datei-API: Nutzen Sie anstelle von toDataURL() die Datei-API, um daraus ein Dateiobjekt zu erstellen die Leinwand. Dadurch können Sie das Bild als Datei speichern, ohne auf CORS angewiesen zu sein.
• Dienste von Drittanbietern nutzen: Entdecken Sie Dienste von Drittanbietern, die Funktionen zum ursprungsübergreifenden Bildabruf bieten, wie z. B. crossOrigin .me.

Das obige ist der detaillierte Inhalt vonWarum löst „canvas.toDataURL()' eine Sicherheitsausnahme bei Cross-Origin-Bildern aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!