Crossover Origin Attribute JS/HTML

[ArjhanToteck]

Basically, I'm writing a program that allows a user to create and export maps. I can't get JavaScript to export the map (a canvas) because it is "tainted." I tried looking this up and tried to fix the error multiple times in multiple ways, but nothing worked. Here is some of the code for exporting in case it helps:

 

<img id="exportImage" crossorigin="Anonymous">


<script>
   
     function exportMap(){
       var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var img = document.getElementById("exportImage")

      // save canvas image as data url (png format by default)
      img.crossorigin = "Anonymous";
      var dataURL = canvas.toDataURL();
      console.log(dataURL)
      document.getElementById("exportImage").src = dataURL;
      }
   
 </script>

Thanks in advance!

[0x21]

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

[ArjhanToteck]

6 hours ago, Serjeant said:

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

I tried using that site, it didn't work. Maybe I did something wrong?

[colonel_mortis]

How are you constructing your canvas? If the canvas includes any images from external sites, you have to have loaded those images using crossorigin="anonymous" and those images need to be served with the correct Access-Control-Allow-Origin response header (either * or the contents of the origin request header, which will be your domain). It doesn't matter what you put on the image tag that you are trying to write the contents of the canvas into - the problem is with the stuff that you put onto the canvas already.

[ArjhanToteck]

Thanks, it works now.