SecurityError: The operation is insecure in 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

如果您能在尝试导出 post 用于修改 canvas 的代码，那将会很有帮助。根据您提供的信息，我的猜测是您正在将外部来源的内容写入您的 canvas。这就是为什么它以前工作并且不再工作的原因。我假设您的初始测试使用了来自同一来源的资源。

说明

canvas 与从您的代码发出的任何数据请求一样，存在相同的安全沙箱。任何时候从另一个 domain/origin 加载内容都会触发 canvas 将 origin-clean 标志设置为 false。这意味着浏览器将阻止您导出已加载到 canvas 中的数据。 Whosebug 上有很多 post 与此类问题有关：

canvas.toDataURL() Security Error The operation is insecure
Security Error with canvas.toDataURL() and drawImage()

SecurityError: The operation is insecure in canvas.toDataURL

SecurityError: The operation is insecure in canvas.toDataURL

html

javascript

jquery

openlayers

openlayers-3

说明