2017-01-27 3 views
0

Ich benutze Openlayers 3, um einige Bereiche von Interesse (Vector-Layer) auf Bing-Karten zu zeichnen. Die Anwendung kann auch eine Tabelle mit Daten erstellen, die auf OL3-Cavnas gezeichnet wurden. Dann kann der Benutzer die erstellte Karte mit dem folgenden Code an den Drucker senden.Tainted Canvases

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

Bis zu diesem Punkt funktioniert alles wie geplant.

andere Schicht hinzugefügt wird, von MapServer stammte, mit dem folgenden Code

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

wo airwaysLayer vom Typ ol.layer.Image.

Mit nun handlePrintMap() erzeugt den folgenden Fehler

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

Ich versuchte this Antwort aber vergeblich.

+0

MapServer muss CORS aktiviert haben, oder Sie müssen die Anforderung stattdessen über einen Proxy ausführen – bartvde

Antwort

0

Lösung wurde in this Post gefunden.

Ich musste crossOrigin: null in createAWYs Funktion hinzufügen (Code unten angegeben) wie in OL3 documentation gezeigt.

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