考虑以下代码：
<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中文网其他相关文章！
