SecurityError:canvas.toDataURL中的操作不安全

Question

我试图解决下一个错误,但没有成功.

我有以下jQuery和HTML5代码:

<script language="javascript" type="text/javascript">

  function doExportMap() {

      map.once('postcompose', function(event) {

        var canvas = event.context.canvas;

        var exportBMPElement = document.createElement('a');
        exportBMPElement.download = 'Mapa.bmp';
        exportBMPElement.href = canvas.toDataURL('image/bmp');
        document.body.appendChild(exportBMPElement);
        exportBMPElement.click();
        document.body.removeChild(exportBMPElement);
      });

      map.renderSync();
  }

它工作得很好,但现在,我收到以下错误:

SecurityError: The operation is insecure.
exportBMPElement.href = canvas.toDataURL('image/bmp');

怎么了？有任何想法吗？

有趣的是,我没有从外部源加载图像.该图像来自localhost

Answer 1

如果您可以在尝试导出之前发布用于修改画布的代码,将会很有帮助.根据您提供的信息,我的猜测是您将内容从外部源写入画布.这就是它之前工作并且不再工作的原因.我假设您的初始测试使用来自同一来源的资源.

说明

画布存在相同的安全沙箱,与您的代码生成的任何数据请求一样.无论何时从其他域/源加载内容,它都会触发画布将origin-clean标志设置为false.这意味着浏览器将阻止您导出已加载到画布中的数据.在StackOverflow上有很多关于此类问题的帖子:

• canvas.toDataURL()安全错误操作不安全
• canvas.toDataURL()和drawImage()的安全性错误