為什麼從不同伺服器載入映像時canvas.toDataURL()會拋出安全異常？

Canvas toDataURL() 的跨域問題

儘管保證了充足的休息，但用戶在使用canvas.toDataURL() 時可能會遇到安全異常。考慮以下程式碼：

<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>

此程式碼嘗試在新視窗中將來自不同伺服器的映像作為 Base64 資料打開，但它會引發 SECURITY_ERR 異常。

根據規範，如果 canvas 元素的 origin-clean 標誌設為 false，其 toDataURL() 方法將引發 SECURITY_ERR 例外。當從不同的伺服器載入映像時，畫布會被污染，並且其 origin-clean 標誌設定為 false。

因此，無法直接使用 toDataURL() 取得來自下列位置的影像的 Base64 資料不同的伺服器。可能需要使用 CORS 或代理等替代技術來處理跨源影像。

以上是為什麼從不同伺服器載入映像時canvas.toDataURL()會拋出安全異常？的詳細內容。更多資訊請關注PHP中文網其他相關文章！