Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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! 
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)?
– tsauerwein
                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
                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
                Jul 8, 2015 at 7:33
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!
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 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 "*".
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"
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.