canvas.toDataURL() 和 drawImage() 的安全错误
<!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()”方法从这个画布创建一个图像。在这里我收到一个安全错误。
Firefox 说 - 错误：未捕获的异常：[异常...“安全错误”代码：“1000” nsresult：“0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)”
Chrome 说 - 未捕获的错误：SECURITY_ERR：DOM 异常 18
如果我使用带有图像的脚本服务器工作正常。所以它认为这次它确实是一个功能而不是一个错误。 有谁知道如何使用画布创建图像而不使用来自其他服务器的图像？ 顺便说一句：如果您在没有网络服务器的情况下将站点作为本地文件运行，则会发生错误。
<!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>
This script creates a canvas with the html5-logo. From this canvas I want to create an image, using the "toDataURL()"-method. Here I get a security error.
Firefox says - Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)"
Chrome says - Uncaught Error: SECURITY_ERR: DOM Exception 18
If I use the script with an image on the server it works fine. So it think this time it is really a feature and not a bug.
Does anyone has an idea how I can create an image using canvas with out of an image form an other server?
BTW: the error occurs if you run the site as a local file without a webserver.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
你是对的，这是一个安全功能，而不是一个错误。
如果读取图像（例如使用
toDataURL或getImageData）可行，您还可以读取https://mail.google.com/mail/ 从访问者的上下文中获取他的电子邮件或其他内容。因此，画布元素有一个 origin-clean 标志，该标志在外部图像写入画布时设置。在这种情况下，您将无法再从中读取内容。
您可以在此处阅读有关此主题的更多信息< /a>.
You are right, this is a security feature, not a bug.
If reading the Image (for instance with
toDataURLorgetImageData) would work, you could also readhttps://mail.google.com/mail/from the context of your visitor get his emails or whatever.Therefore, canvas elements have a origin-clean flag, which is set when external images are written to the canvas. In that case, you can no longer read from it.
You can read more about this topic here.
我认为该错误是同源策略的扩展，基本上它不允许您操纵来自另一台服务器的资源。尽管不安全，您可以在服务器中构建一种检索外部资源的方法：myserver.com/?external=url/path/to/img... 理论上可行。
i believe that the error is an extension to the same origin policy, basically it isnt allowing you to manipulate a resource from another server. although insecure you could build into the server a method of retrieving external resources: myserver.com/?external=url/path/to/img... that would work in theory.
是的，这是一个功能。由于图像位于另一台服务器上。检查这个
为什么canvas.toDataURL()会抛出安全异常？
你可以捕获这些异常。但这对于其他浏览器来说也是令人头疼的，而且也不利于安全。
所以更好的解决方案是在本地下载该图像。并给出图像的 src 路径。
Ya thats a feature. As the image is on another server. Check this
Why does canvas.toDataURL() throw a security exception?
You can catch these exceptions. But this will be headache to do for other browsers too and also not right for security.
So better solution is download that image on local.And give the image src path to that.