Tainted canvases may not be exported

Question

I want to save my canvas to a img. I have this function:

function save() {
    document.getElementById(\"canvasimg\").style.border = \"2px solid\";
    var d         


        

Answer 1

Just as a build on @markE's answer—if you want to create a local server. You won't have this error on a local server.

If you have PHP installed on your computer:

1. Open up your terminal/cmd
2. Navigate into the folder where your website files are
3. While in this folder, run the command php -S localhost:3000 ← Notice the capital 'S'
4. Open up your browser and in the URL bar go to localhost:3000. Your website should be running there.

or

If you have Node.js installed on your computer:

1. Open up your terminal/cmd
2. Navigate into the folder where your website files are
3. While in this folder, run the command npm init -y
4. Run npm install live-server -g or sudo npm install live-server -g on a mac
5. Run live-server and it should automatically open up a new tab in the browser with your website open.

Note: remember to have an index.html file in the root of your folder or else you might have some issues.

Answer 2

In the img tag set crossorigin to Anonymous.

<img crossorigin="anonymous"></img>

Answer 3

If someone views on my answer, you maybe in this condition:

1. Trying to get a map screenshot in canvas using openlayers (version >= 3)
2. And viewed the example of exporting map
3. Using ol.source.XYZ to render map layer

Bingo!

Using ol.source.XYZ.crossOrigin = 'Anonymous' to solve your confuse. Or like following code:

     var baseLayer = new ol.layer.Tile({
         name: 'basic',
         source: new ol.source.XYZ({
             url: options.baseMap.basic,
             crossOrigin: "Anonymous"
         })
     });

Answer 4

In my case I was drawing onto a canvas tag from a video. To address the tainted canvas error I had to do two things:

<video id="video_source" crossorigin="anonymous">
    <source src="http://crossdomain.example.com/myfile.mp4">
</video>

• Ensure Access-Control-Allow-Origin header is set in the video source response (proper setup of crossdomain.example.com)
• Set the video tag to have crossorigin="anonymous"