Question

我使用openlayers 3在Bing地图上绘制一些感兴趣的区域（矢量图层）。该应用程序还可以创建一个表格，其中包含在OL3 cavnas上绘制的数据。然后，用户可以使用以下代码将创建的地图发送给打印机。

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();
}

直到这一点，一切都按计划进行。

使用以下代码

添加另一个源自MapServer的图层

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

其中airwaysLayer的类型为ol.layer.Image。

立即使用handlePrintMap()会产生以下错误

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

我尝试了this，但徒劳无功。

Answer 1

在this帖子中找到了解决方案。

我必须在crossOrigin: null函数中添加createAWYs（下面给出的代码），如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;
}

污染的画布

1 个答案: