为什么从不同服务器加载图像时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中文网其他相关文章！