6

As far as I know, you cannot use canvas.toDataURL() on a tainted canvas (i.e. cross-origin). Looking at this example it seems the tiles are coming from different origin (tile.openstreetmap.org). How did OL3 managed to use toDataURL() in this case?

I tried monitoring network traffic and it seems no proxy are being used to circumvent cross-origin rules.

  • exports from the users cache on their web browser. – Mapperz Feb 7 '14 at 17:18
  • 1
    @Mapperz, can you elaborate how is this done? – Angelo Arboleda Feb 7 '14 at 17:35
7

TLDR; Add crossOrigin: 'anonymous' to your source params.


This took awhile for me to dig down to but I think I have the answer. Assuming your tile server is not in your domain, and that it is providing the Access-Control-Allow-Origin:* response header as mine was.

The key is the OSM source they use. If you take a look at the documentation for ol.source.OSM you can see that there is a crossOrigin option (which defaults to 'anonymous' for osm)

This got me looking into the source for the tile source, I am using WMTS primarily but it didn't seem like these were defaulting to 'anonymous' instead requiring the dev to set this in the options for the given source.

Adding crossOrigin: 'anonymous' to my source options fixed this problem for me.

var source = new ol.layer.Tile({    
  ...
  source: new ol.source.WMTS({
    crossOrigin: 'anonymous',
    ...

Adding this parameter changed my request headers to include one parameter:

 Origin: http://localhost:3001

Which as far as I can tell allows it to pass the CORS resource sharing test. Just not sure if this is due to 3 now being able to be checked, or more probably that it sets the omit credentials flag in the ajax request thus passing step 2.

1

So I guess the answer to this question is on the manner the other domain is responding to the request. Upon closer inspection of the reply of OSM server (e.g. http://b.tile.openstreetmap.org/6/56/29.png), the header is set to Access-Control-Allow-Origin:* thus there are no cross-origin issue encountered.

  • 1
    There has to be more to it. All my server responses (map tiles and static files) have this header set, but the canvas is still tainted. – relet Dec 12 '14 at 8:30
-1

They are able to serve the tiles from a different domain with the help of a proxy.cgi script which must be present in the ol3js.org web server.

To understand how to workaround the Access-Control-Allow-Origin problem, please, read the section Configuring an OpenLayers proxy.cgi for Loading Local and Remotely Hosted GeoServer WFS Data here. That principle applies to all map servers, not only for GeoServer.

  • I think this is incorrect. If you view the application's network traffic you will see the tiles being sourced from a different domain by the browser. No proxy is being used. – tomfumb Feb 7 '14 at 20:04
  • It's a tested issue. I've installed a few GeoServers using only this method and I don't have any problems. – Sorin Călinică Feb 7 '14 at 20:12
  • I mean in this case you are incorrect. I'm well aware that the proxy approach works, but the referenced application doesn't use it. – tomfumb Feb 7 '14 at 20:16
  • 1
    you're still describing something that is irrelevant in this question. The site referenced in the question does not use a proxy.cgi script. If you don't believe me please see: i.imgur.com/gFMrczn.png If a proxy was used the tiles would come from something like ol3js.org/proxy.cgi, but they don't - they come from an entirely separate domain. The question's poster sees this and understands this means the canvas is indeed tainted. Your answer and comments are relevant to different questions but not this one. One may therefore choose to describe the answer as 'incorrect' – tomfumb Feb 7 '14 at 21:09
  • 1
    I've been using proxy in solving cross-origin problems. My initial thoughts on how the export was achieved in the example was somehow through a proxy. But as what @tomfumb has done, I monitored network traffic and it seems no proxy request are being made. I'm really interested on the details about Mapperz comment that the export was achieved using cached data/images. – Angelo Arboleda Feb 8 '14 at 4:54
-1

This works with any kind of source

var source = new ol.layer.Tile({    
  ...
  source: new ol.source.WMTS({
    crossOrigin: 'anonymous',
    ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.