[SOLVED] Tainted canvases

Tainted canvases

I'm using openlayers 3 to draw some areas of interest (Vector layer) on Bing maps. The application may also create a table with data drawn on OL3 cavnas. Then the user may send to printer the created map with the following code.

function handlePrintMap() {
  var canvas = document.getElementsByTagName('canvas')[0];
  var dataUrl = canvas.toDataURL('image/png');  

  var windowContent = '<!DOCTYPE html>';
  windowContent += '<html>'
  windowContent += '<head><title>Print canvas</title></head>';
  windowContent += '<body>'
  windowContent += '<img src="' + dataUrl + '">';
  windowContent += '</body>';
  windowContent += '</html>';
  var printWin = window.open('','','width=1280,height=1027');
  printWin.document.open();
  printWin.document.write(windowContent);
  printWin.document.close();
  printWin.focus();
  printWin.print();
  printWin.close();
}

Till this point everything works as planned.

Another layer is added, originated from MapServer, using the following code

airwaysLayer.setSource(createAWYs('airways,navpoints'));

where airwaysLayer is of type ol.layer.Image.

Using now handlePrintMap() produces the following error

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

I tried this answer but in vain.

Solution

Solution was found in this post.

I had to add crossOrigin: null in createAWYs function (code given below) as shown in OL3 documentation.

function createAWYs(mapservquery) {
  var wmsSource = new ol.source.ImageWMS({
    url: 'http://localhost/cgi-bin/mapserv.exe?',
    params: {
      'SERVICE':'WMS',
      'map': 'C:/xampp/maps/airways.map',          
      'LAYERS': mapservquery,
      'VERSION':'1.3.0',
      'REQUEST':'GetMap',
      'FORMAT':"image/png"
    },
    serverType: 'mapserver', 
    ratio: 1,
    crossOrigin: null
  });
  return wmsSource;
}