OpenLayers: 'Failed to execute 'toDataURL' on 'HTMLCanvasElement'

Question

I have a problem when I try to export a map with multiple layer created using OpenLayer.
This is my JS code:

map.once('postcompose', function(event) {
       var img = new Image,
       canvas = event.context.canvas;

       img.crossOrigin = "anonymous";
       img.src = canvas.toDataURL('image/png');
});

Where map is the JavaScript variable of my OpenLayers map.
When the map is composed of more than one level, I receive this kind of error:

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

If a try to do the same thing without adding level to the map (just using the default OpenLayer map) I am able to generate the data URL and download the map in png format.
It seems to be a CrossOrigin problem, but the CORs should be enabled on my server.
Any help? Thanks!

EDIT
Here it is the JS code example where I add the layer to the map that is causing this issues.

var layer = new ol.layer.Image({
     source: new ol.source.ImageWMS({
        url: 'http://pubblicazioni.provincia.fi.it/geoserver/wms',
        params: {
                'LAYERS': 'layer_name',
                'FORMAT': 'image/png',
                'TRANSPARENT': 'true'
        },
        crossOrigin: null
     })
});
map.addLayer(layer);

Have you tried setting `crossOrigin: ''` on the source of your tile layer (like in this [example](http://openlayers.org/en/master/examples/icon.html))? — tsauerwein, Jul 08 '15 at 06:17
I tried to set crossOrigin: 'Anonymous', but in that case I wasn't able to load the layer on the map due security error. I will try with your suggestion. — neoben, Jul 08 '15 at 07:30
When I use `crossOrigin: ''` I recevive this kind of error: `Image from origin 'http://pubblicazioni.provincia.fi.it' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://188.166.72.87' is therefore not allowed access.` — neoben, Jul 08 '15 at 07:33

score 2 · Accepted Answer · answered Jul 09 '15 at 09:27

I solved the problem implementing a local proxy on my server as suggested by MichaelJS.
I'm running a Django app, so I developed a customized proxy starting from this code:
https://github.com/mjumbewu/django-proxy

Then in my urls.py I defined this rule:

url(r'^proxy/(?P<url>.*)$', views.proxy_view, name='proxy'),

And finally I proxed the request to the WMS service changing the JS code this way:

var layer = new ol.layer.Image({
     source: new ol.source.ImageWMS({
        url: '/proxy/http://pubblicazioni.provincia.fi.it/geoserver/wms',
        params: {
                'LAYERS': 'layer_name',
                'FORMAT': 'image/png',
                'TRANSPARENT': 'true'
        },
        crossOrigin: null
     })
});
map.addLayer(layer);

CrossOrigin issue solved!

score 2 · Answer 2 · answered May 29 '16 at 19:24

2

You can look at this document to see CORS settings. Instead of setting crossOrigin in your source to '', you can try setting it to anonymous:

crossOrigin: 'Anonymous'

answered May 29 '16 at 19:24

jOshT

1,525
1
11
15

score 1 · Answer 3 · answered Jul 08 '15 at 14:09

1

Since I cant comment yet, my answer here The solutions is a) set up a local proxy and receive the data with its help b) ask the source-provider if he can activate Cross-Origin-Allow-Header "*".

answered Jul 08 '15 at 14:09

MichaelJS

193
1
1
10

score 0 · Answer 4 · answered Dec 09 '19 at 12:12

This can be happens,when you load the wms layers images into the map but this wms layers loads some CORS insecure third-party images. it is security behaviors of from the browser which disable downloading of the tainted image. To avoid having tainted canvas put crossOrigin: "anonymous" this line into your base map. See following example:

    new ol.layer.Tile({
        title: 'Périmètres des PPR Inondation',
        type: 'base',
        visible: false,
        zIndex: 1000,
        source: new ol.source.TileWMS({
        url: wmsperi,
        params: {'LAYERS': 'PPRN_PERIMETRE_INOND', 'TILED': true, 'CRS': 'EPSG:3857'},
        crossOrigin: "anonymous"
        })

OpenLayers: 'Failed to execute 'toDataURL' on 'HTMLCanvasElement'

4 Answers4