javascript - SecurityError: The operation is insecure in canvas.toDataURL - Stack Overflow

admin管理员组

文章数量:1342522

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

I have the following jQuery and HTML5 code:

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

  function doExportMap() {

      map.once('postpose', 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?

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

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

I have the following jQuery and HTML5 code:

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

  function doExportMap() {

      map.once('postpose', 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?

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

• javascript
• jquery
• html
• openlayers
• openlayers-3

Share Improve this question Follow edited Oct 31, 2015 at 15:13 Universal Electricity 77511 gold badge1313 silver badges2626 bronze badges asked Mar 18, 2015 at 22:06 Javier MuñozJavier Muñoz 79011 gold badge1313 silver badges3131 bronze badges 6

• What have you drawn on that canvas? – user149341 Commented Mar 18, 2015 at 22:09
• 1 Are you loading an image from an external source into your canvas? – Shawn Lehner Commented Mar 18, 2015 at 22:09
• When your image.src is outside the webpage domain, you will "taint" the canvas and you will not be able to use ctx.getImageData or ctx.toDataURL. The browser automatically taints the canvas as a way to protect users from having their private information taken through malicious scripts using getImageData (for example, the user's banking login screen). Here's a link to more info about this security restriction: developer.mozilla/en-US/docs/Web/HTML/CORS_enabled_image – markE Commented Mar 18, 2015 at 22:10
• The funny that I'm not loading the image from an external source... So, I'm not understanding nothing... :S – Javier Muñoz Commented Mar 18, 2015 at 22:12
• What layers are you using? You are probably missing a 'crossOrigin':'anonymous' in one of your tile sources or your tile servers do not support CORS. – tsauerwein Commented Mar 19, 2015 at 7:47

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 8

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.

---

Explanation

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() Security Error The operation is insecure
• Security Error with canvas.toDataURL() and drawImage()

本文标签： javascriptSecurityError The operation is insecure in canvastoDataURLStack Overflow