关于canvas的toDataURL报错问题

Question

各位大神，请教大家一个问题。
如图，第一张图是我用canvas的toDataURL的方法，想把canvas上的缩略图保存下来，总是会有第二张图那样的报错，弄不清楚原因。
到了第三张图，我用同样的方法就是好的，可以正常显示的。

有谁知道原因吗？该怎么解决呢？烦请各位解答一下，感谢。

Answer 1

你一张图里_img使用的是不同域名的图片吧，这样drawImage到canvas, 就会有跨域问题，而第二张是同域
解决方案（需要图片服务器添加Access-Control-Allow-Origin: *，下面代码才行）

var image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.src...

参考：

• 各种后端语言和web服务器怎么设置Access-Control-Allow-Origin

• http://stackoverflow.com/ques...

Answer 2

报错写的很清楚了：Uncaught SecurityError，就是说“捕获安全错误”，一般都是跨域问题引起的。浏览器认为，你的网站引用其它网站的内容是有风险的，具体可以看网上的博文，讲的很清楚的。

Answer 3

这个是canvas出于安全考虑吧，所以要保存图片必须要在服务器环境(http://localhost/file.html)，不然直接从文件夹打开是保存不了的，还有就是canvas引用的图片必须同域