javascript - OpenLayers: 'Failed to execute 'toDataURL' on 'HTMLCanvasElement' - Stack O

admin管理员组

文章数量:1352150

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

map.once('postpose', 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 posed 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: '',
        params: {
                'LAYERS': 'layer_name',
                'FORMAT': 'image/png',
                'TRANSPARENT': 'true'
        },
        crossOrigin: null
     })
});
map.addLayer(layer);

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

map.once('postpose', 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 posed 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);

• javascript
• canvas
• dictionary
• openlayers-3
• wms

Share Improve this question Follow edited Jul 8, 2015 at 7:44 neoben asked Jul 7, 2015 at 21:27 neobenneoben 7731313 silver badges3030 bronze badges 3

• 1 Have you tried setting crossOrigin: '' on the source of your tile layer (like in this example)? – tsauerwein Commented Jul 8, 2015 at 6: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 Commented Jul 8, 2015 at 7: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 Commented Jul 8, 2015 at 7:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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./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!

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'

Since I cant ment 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 "*".

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"
        })

本文标签： javascriptOpenLayers 39Failed to execute 39toDataURL39 on 39HTMLCanvasElement39Stack Overflow