TransWikia.com

Export Map Error from OpenLayers 3 in Chrome?

Geographic Information Systems Asked by Satya Chandra on September 3, 2021

Im using this js file to export map in Openlayers 3 in Google Chrome but i’m getting en error saying that Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. I also set an cross Origin attribute as anonymous. The function of export button is as follow 

var exportPNGElement = document.getElementById('export-png');
exportPNGElement.crossOrigin = "anonymous";
    if ('download' in exportPNGElement) {
      exportPNGElement.addEventListener('click', function(e) {
        map.once('postcompose', function(event) {
          var canvas = event.context.canvas;
          exportPNGElement.href = canvas.toDataURL('image/png');
        });
        map.renderSync();
      }, false);
    } else {
      var info = document.getElementById('no-download');
      /**
       * display error message
       */
      info.style.display = '';
    }
chromemapcanvasopenlayers

2 Answers

Try to change it something like that:

function exportPNGElement() {
    map.once('postcompose', function(event) {
      var canvas = event.context.canvas;
      if (navigator.msSaveBlob) {
        navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
      } else {
        canvas.toBlob(function(blob) {
          saveAs(blob, 'map.png');
        });
      }
    });
    map.renderSync();
  };

Answered by Moh on September 3, 2021

try adding crossOrigin: 'Anonymous' to the layer sources !

Answered by Capan on September 3, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP