Solución:
Desafortunadamente, lo que está experimentando es un comportamiento esperado y no un error.
Una vez que agrega una imagen de un dominio externo, o entre dominios, y la usa en el lienzo, el lienzo se “contamina” y el navegador no le permitirá extraer datos de él.
La única solución para esto es de dos pasos:
-
Los encabezados adecuados deben ser enviados por el servidor, que le envía las imágenes.
-
los
crossOrigin
atributo en la propia imagen en JavaScript. En OpenLayers, puede hacer esto usandocrossOrigin: 'anonymous'
en la configuración de la capa. Por ejemplo:
var wms_layer=new ol.layer.Tile({ extent: [-13884991, 2870341, -7455066, 6338219], source: new ol.source.TileWMS({ url: 'http://demo.boundlessgeo.com/geoserver/wms', params: {'LAYERS': 'topp:states', 'TILED': true}, serverType: 'geoserver', crossOrigin: 'anonymous' }) });
Ahora sé que no tienes control sobre el servidor, por lo que no puedes dar el primer paso.
En caso de que el servidor lo permita, podría tener un proxy en su propio servidor, que sirva estos mosaicos, y todo el problema se evitará.