汚染されたキャンバス

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

この時点まではすべて計画通りです。

別の層が追加され、次のコード

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

答えて

関連する問題