SecurityError：canvas.toDataURL中的操作不安全 [英] SecurityError: The operation is insecure in canvas.toDataURL

问题描述

我已尝试解决下一个错误，但没有成功。

I've tried to resolve the next error but without success.

我有以下jQuery和HTML5代码：

I have the following jQuery and HTML5 code:

<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();
  }

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

It was working perfectly way, but now, I'm getting the following error:

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

有什么问题？有什么想法？

What is wrong? Any ideas?

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

The funny is that I'm not loading the image from an external source. The image is from localhost

推荐答案

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

It would be helpful if you could post the code you are using to modify the canvas before attempting to export it. With the information you provided, my guess would be that you are writing content from an external source to your canvas. This is why it was working before and is no longer working. I assume your initial tests used a resource from the same origin.

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

The same security sandbox exists with the canvas as does with any data requests being made from your code. Anytime you load content from another domain/origin it will trigger the canvas to set the origin-clean flag to false. This means the browser will prevent you from exporting data that has been loaded into the canvas. There are quite a few posts pertaining to this type of issue on StackOverflow:

• canvas.toDataURL（）安全错误操作不安全


• canvas.toDataURL（）和drawImage（）的安全性错误

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

这篇关于SecurityError：canvas.toDataURL中的操作不安全的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！