为什么从不同来源绘制图像时'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中文网其他相关文章！