文章/答案/技术大牛

发布

问被污染的画布
EN

Stack Overflow用户

提问于 2017-01-27 20:00:22

回答 1查看 924关注 0票数 1

我正在使用openlayer 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，但徒劳无功。

printing

openlayers-3

mapserver

canvas

回答 1

Stack Overflow用户

发布于 2017-01-27 21:35:54

在this post中找到了解决方案。

我必须在createAWYs函数中添加crossOrigin: null (代码如下所示)，如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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41893513

复制

相似问题

问被污染的画布
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问被污染的画布EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问被污染的画布
EN