0

I want to create a client side printing module for OpenLayers (v6) map. In OpenLayers web site there is a printing example with JSPDF (Export PDF example ). I used this example but there is an error:

In firefox:

SecurityError: The operation is insecure.

In Chrome:

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

and error is on this line:

mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1])

My Problem is that when I add Vector Tile Layers (not WMS, not vector layer, not OSM Tiles) with MVT() format, layers are shown but after using print module, this error is showing in console.

I used crossOrigin: 'anonymous' like this answer for my vector tile source but the mentioned error there is on console and it is not working truly:

new VectorTileSource({
        crossOrigin: "Anonymous",
        format: new MVT({
            idProperty: "id"
         }),
        renderMode:"hybrid",
        defaultDataProjection: "EPSG:900913",
        url: GEOSERVER_ADDDRESS+"gwc/service/tms/1.0.0/" + STORE+":"+LAYER_NAME +
                "@EPSG%3A"+"900913"+"@pbf/{z}/{x}/{-y}.pbf"
})

My GeoServer is running on port 8080 and is not installed on Tomcat. Is there any solution for this issue on client side (OpenLayers) or server side (GeoServer)?

I couldn't find any solution for my case and I don't know how should I probably config GeoServer to solve this problem.

  • Did you install CORS in GeoServer's Jetty - https://gis.stackexchange.com/questions/210109/enabling-cors-in-geoserver-jetty – Ian Turton Apr 29 '20 at 16:18
  • 1
    Vector tiles should not taint the canvas, but icons used to style them might. – Mike Apr 29 '20 at 16:33
  • @Ian Turton♦, I didn't installed this CORS pluggin in geoserver. But I added Allow cross origin to 'webapps/geoserver/WEB-INF/web.xml' and my vector tile layers are displaing on the map. The error is just after printing. – Mahdi Nazari Ashani Apr 29 '20 at 16:49
  • @Mike , I used Icons for my styling on vector tiles. How can I solve this problem? I am using django for my backend. – Mahdi Nazari Ashani Apr 29 '20 at 16:53
  • 1
    You need crossOrigin: 'anonymous' in the icon style as in https://openlayers.org/en/latest/examples/icon-negative.html or you could copy the file to you own server, – Mike Apr 29 '20 at 18:20
  • @ Mike, thank you very much for answering. After your comment I'm sure that it is because of icons. I added crossOrigin: 'anonymous' to my icon style then printing module worked. but vector tile layers with icon are not displaying on the map. I think I should add a config to django to allow images to be download. Do you know how it is possible? – Mahdi Nazari Ashani Apr 30 '20 at 09:47
  • @Mike , The problem exists. Can you help me. please read my last comment. thank you a lot, – Mahdi Nazari Ashani May 01 '20 at 08:47
  • 1
    If the icons do not support cross origin access the simplest solution would be to copy them to your own server.. – Mike May 01 '20 at 11:58
  • Thank u veryy much. I found the solution. I should add allow access origin header to my django Response in my media view with a middlware or directly. – Mahdi Nazari Ashani May 01 '20 at 14:03

0 Answers0