2

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 = '';
    }
  • This is a CORS problem of your images consisting your map. What sort of layers exist within the image you are trying to export? – pavlos Feb 26 '18 at 13:09
  • My layers consists of administrative boundaries and I enabled CORS extension in Chrome! – Satya Chandra Feb 26 '18 at 13:14
  • You have to enable CORS on the server side. Enable it on client doesnt help. I am asking the type of layer , is it geoserver for example? If yes you have to enable CORS on geoserver side. – pavlos Feb 27 '18 at 11:39
1

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

| improve this answer | |
0

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();
  };
| improve this answer | |
  • I tried this one also but same error.. – Satya Chandra Feb 26 '18 at 13:06
  • @Hyma I am working with this function and it works in all browsers, try to check your code. (why your canvas is tainted) – Moh Feb 26 '18 at 13:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.