canvas.toDataURL(） 和 drawImage(） 的安全错误

Security Error with canvas.toDataURL() and drawImage()

本文关键字：安全 错误 toDataURL canvas drawImage      更新时间：2023-09-26
<!doctype html>
<canvas id="canvas" height="200" width="200"></canvas>
<div id="new"></div>
<script>
var div = document.getElementById("new");
var canvas = document.getElementById("canvas");  
var ctx = canvas.getContext("2d");  
var img = new Image();
img.src = 'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png';
//img.src = 'local.png';
img.onload = function(){
    //draws the image on the canvas (works)
    ctx.drawImage(img,0,0,200,200);
    //creates an image from the canvas (works only for local.png)
    var sourceStr = canvas.toDataURL();
    //creates the img-tag and adds it to the div-container
    var newImage = document.createElement("img");
    newImage.src = sourceStr;
    div.appendChild(newImage);
}
</script>

此脚本创建一个带有 html5 徽标的画布。在这个画布上，我想使用"toDataURL(("方法创建一个图像。在这里，我收到一个安全错误。

火狐 说 - 错误：未捕获的异常：[异常..."安全错误"代码："1000" ns结果："0x805303e8 (NS_ERROR_DOM_SECURITY_ERR(">

铬 说 - 未捕获错误：SECURITY_ERR：DOM 异常 18

如果我将脚本与服务器上的图像一起使用，它可以正常工作。所以它认为这次它真的是一个功能而不是一个错误。有没有人知道我如何使用画布创建图像，而从其他服务器创建图像？顺便说一句：如果您在没有 Web 服务器的情况下将站点作为本地文件运行，则会发生错误。

你是对的，这是一个安全功能，而不是一个错误。

如果阅读图像(例如使用toDataURL或getImageData(可以工作，您还可以从访问者收到电子邮件或其他内容的上下文中阅读https://mail.google.com/mail/。

因此，画布

元素具有一个源清理标志，该标志是在将外部图像写入画布时设置的。在这种情况下，您将无法再从中读取。

您可以在此处阅读有关此主题的更多信息。

我相信

该错误是对同源策略的扩展，基本上它不允许您从另一台服务器操作资源。 虽然不安全，但您可以在服务器中构建一种检索外部资源的方法：myserver.com/?external=url/path/to/img...这在理论上是可行的。

这是一个功能。由于映像位于另一台服务器上。检查这个

为什么 canvas.toDataURL(( 会抛出安全异常？

您可以捕获这些异常。但是对于其他浏览器来说，这也将是令人头疼的，也不适合安全性。

所以更好的解决方案是在本地下载该图像。并为此提供图像 src 路径。

相关文章：