HTML2canvas in offline version - Tainted canvases may not be exported

Question

I am getting the error:

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at HTMLAnchorElement.

and I don't know why, since I added the crossOrigin = 'anonymous' to my code both in JavaScript and the HTML code as per the advice below:

'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

https://jsfiddle.net/user2314737/q1pezv2j/

I think the situation is similar to this one:

"Tainted canvases may not be exported" issue still present after setting cross-origin on S3 bucket

Now, my code looks like this:

  <script>
  function makeScreenshot() {
    html2canvas(document.getElementById("screenshot"), {scale: 2}).then(canvas => {
    canvas.id = "map";
    canvas.crossOrigin = 'anonymous';
    var main = document.getElementById("main");
    while (main.firstChild) {
   main.removeChild(main.firstChild); 
    }
    console.log(main);
    main.appendChild(canvas);
    });
    }

    document.getElementById("a-make").addEventListener('click', function()
   {
document.getElementById("a-make").style.display = "none";
makeScreenshot();
document.getElementById("a-download").style.display = "inline";
   }, false);

   document.getElementById("a-download").addEventListener('click', function()
   {
  this.href = document.getElementById("map").querySelector('canvas').toDataURL();
 this.download = "canvas-image.png";
 }, false);
    </script>

and the HTML section:

     </div>
    <div id="map" crossorigin="anonymous">
     <div id="screenshot" crossorigin>
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content"></div>
     </div>
        </div>
     <a id="a-make" href="#">Make a screenshot</a>
     <a id="a-download" href="#" style="display:none;">Download a screenshot</a>
     </div>

The "crossorigin" didn't help. Is there any other solution for this?

Is it related to the domain situation?

Tainted canvases may not be exported

If the problem is CORS like here:

Angular 8 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

I use Google Chrome browser, like in the situation below:

Chrome: Tainted canvases may not be exported; Offline-only app

but the problem is, that I cannot place the data inside the , because in my case is <div id="map"></div>

SOme of the solutions require temporary hosting for this:

Canvas.toDataURL() Tainted canvases may not be exported

the CORS issues have been explained here:

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

but it still applies to the image not to situation.

Basically, I need something like this:

http://jsfiddle.net/mvjuhkwq/

but the in my case comes from another script, based in the separated file, which is linked to my code:

     <script src="./resources/qgis2web.js"></script>

instead of placing in the container on the index.html file.

I want to launch this script offline and make it useful offline only. Is it possible?

UPDATE:

I also added the crossOrigin: 'anonymous' to the qgis2web.js file

 var map = new ol.Map({
  controls: ol.control.defaults({attribution:false}).extend([
    expandedAttribution,new ol.control.ScaleLine({}),new measureControl(),new 
  geolocateControl()
   ]),
   target: document.getElementById('map'),
   renderer: 'canvas',
   crossOrigin: 'anonymous',
   overlays: [overlayPopup],
   layers: layersList,
   format: 'image/png',
   view: new ol.View({
     maxZoom: 22, minZoom: 17
  })
});

still without the result

Answer 1

You can solve the problem with this configuration:

html2canvas(document.getElementById("screenshot"), {
    allowTaint: true,
    foreignObjectRendering: true,

    // your configurations
    scale: 2
}).then(canvas => {...});