w3ctech

为什么canvas.toDataURL()报错

今天群里有一位同学丢出来一段代码:

var canvas = document.getElementById('canvasBox'),
context = canvas.getContext('2d');
......
var dataUrl=canvas.toDataURL(); 

说道:FF正常,谷歌会报错。

有另外一个同学说:贴一下截图

这位同学的贴图如下:

报错贴图

可以看到, 他的报错信息是:"Uncaught Error: SECURITY_ERR: DOM Exception 18"。其实这个问题W3C的规范有提到。

那究竟是什么原因造成这个报错呢?

w3ctech微信

扫码关注w3ctech微信公众号

共收到3条回复

  • 其实这个问题是因为他是基于file:// 进行调试的,而chrome做了安全相关的处理,主要是HTML5安全的CORS(跨域资源共享)的安全限制,造成出现这样的提示,如果你需要在自己的电脑上调试的话,只需要本地搭建一个服务器环境就可以了。

    回复此楼
  • 包括 dataUrl 也是跨站的。这个设计坏处挺多,至少 svg to png 就做不到了

    回复此楼
  • 用fiddler比搭服务器还省事,如果只是静态文件

    回复此楼