Warum löst canvas.toDataURL() beim Laden von Bildern von verschiedenen Servern eine Sicherheitsausnahme aus?

Cross-Origin-Problem in Canvas toDataURL()

Obwohl für ausreichend Ruhe gesorgt ist, können Benutzer bei der Verwendung von canvas.toDataURL() auf Sicherheitsausnahmen stoßen . Betrachten Sie den folgenden Code:

<code class="javascript">var frame = document.getElementById("viewer");
frame.width = 100;
frame.height = 100;

var ctx = frame.getContext("2d");
var img = new Image();
img.src = "http://www.ansearch.com/images/interface/item/small/image.png"

img.onload = function() {
    // Draw image
    ctx.drawImage(img, 0, 0)

    // Security exception occurs here:
    window.open(frame.toDataURL("image/png"));
}</code>

Dieser Code versucht, ein Bild von einem anderen Server als Base64-Daten in einem neuen Fenster zu öffnen, löst jedoch eine SECURITY_ERR-Ausnahme aus.

Gemäß den Spezifikationen , löst die toDataURL()-Methode eines Canvas-Elements eine SECURITY_ERR-Ausnahme aus, wenn sein Origin-Clean-Flag auf false gesetzt ist. Wenn ein Bild von einem anderen Server geladen wird, wird die Leinwand beschädigt und das Flag „Origin-Clean“ wird auf „false“ gesetzt.

Daher ist es nicht möglich, toDataURL() direkt zu verwenden, um Base64-Daten für Bilder zu erhalten, von denen die Quelle stammt verschiedene Server. Für den Umgang mit ursprungsübergreifenden Bildern können alternative Techniken wie CORS oder Proxys erforderlich sein.

Das obige ist der detaillierte Inhalt vonWarum löst canvas.toDataURL() beim Laden von Bildern von verschiedenen Servern eine Sicherheitsausnahme aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!