Warum wirft „canvas.toDataURL()“ einen „SECURITY_ERR“ aus, wenn Bilder von einem anderen Ursprung gezeichnet werden?

Verstehen der Sicherheitsausnahme in „canvas.toDataURL()“

Bedenken Sie den folgenden Code:

<pre class="brush:php;toolbar:false">
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)

    // Here's where the error happens:
    window.open(frame.toDataURL("image/png"));
}

Dieser Code versucht, ein Canvas-Element mithilfe der Methode „toDataURL()“ in eine Daten-URL umzuwandeln. Dies führt jedoch zu einem Fehler „SECURITY_ERR: DOM Exception 18“.

Der Grund für diesen Fehler liegt in den Sicherheitsbeschränkungen der Webbrowser. Wenn das Bild, das auf die Leinwand gezeichnet wird, von einem anderen Ursprung stammt (in diesem Fall von „http://www.ansearch.com“), verhindert der Browser gemäß den HTML-Canvas-Spezifikationen die Konvertierung der Leinwand in eine Daten-URL. Dies geschieht, um herkunftsübergreifenden Datenzugriff und potenzielle Sicherheitslücken zu verhindern.

Wenn Sie also versuchen, eine Daten-URL aus einem Canvas-Element zu generieren, das ein Bild von einem anderen Ursprung enthält, werden Sie auf diese Sicherheit stoßen Ausnahme. Um dieses Problem zu beheben, müssen Sie sicherstellen, dass das Bild vom gleichen Ursprung wie Ihre Webanwendung bereitgestellt wird, oder alternative Methoden zur Bildkonvertierung erkunden.

Das obige ist der detaillierte Inhalt vonWarum wirft „canvas.toDataURL()“ einen „SECURITY_ERR“ aus, wenn Bilder von einem anderen Ursprung gezeichnet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!