오염 된 캔버스

저는 Bing 맵에 관심 영역 (벡터 레이어)을 그리기 위해 openlayers 3을 사용하고 있습니다. 응용 프로그램은 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(); 
}

이 시점까지는 모든 것이 계획대로 작동합니다.

다른 층이 추가

, airwaysLayer 유형이다 ol.layer.Image 다음 코드

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

를 사용하여, 맵 서버 유래. 사용

는

지금 handlePrintMap() 내가 this 대답하지만 헛된 시도

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

다음과 같은 오류를 생성합니다.

출처

2017-01-27 Pavlos Papanikolaou

MapServer에 CORS를 사용하도록 설정해야하거나 대신 프록시를 통해 요청을 실행해야합니다. – bartvde

해결책은 this에서 발견되었습니다.

OL3 documentation과 같이 createAWYs 함수 (아래 코드)에 crossOrigin: null을 추가해야했습니다.

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

출처

2017-01-27 13:35:54

오염 된 캔버스

답변

관련 문제