為什麼從不同來源繪製影像時「canvas.toDataURL()」會拋出「SECURITY_ERR」？

了解'canvas.toDataURL()' 中的安全異常

考慮以下程式碼：

<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"));
}

此程式碼嘗試使用“toDataURL()”方法將畫布元素轉換為資料URL。然而，這會導致“SECURITY_ERR: DOM Exception 18”錯誤。

此錯誤的原因源自於網頁瀏覽器所施加的安全限制。根據 HTML Canvas 規範，如果繪製到畫布上的圖像來自不同的來源（在本例中為「http://www.ansearch.com」），瀏覽器將阻止將畫布轉換為資料 URL。這樣做是為了防止跨來源資料存取和潛在的安全漏洞。

因此，如果您嘗試從包含來自不同來源的圖像的畫布元素生成資料 URL，您將遇到此安全問題例外。要解決此問題，您需要確保圖像與您的 Web 應用程式來自同一來源，或探索圖像轉換的替代方法。

以上是為什麼從不同來源繪製影像時「canvas.toDataURL()」會拋出「SECURITY_ERR」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！