Tainted canvases may not be exported
For security reasons, your local drive is declared to be "other-domain" and will taint the canvas.
(That's because your most sensitive info is likely on your local drive!).
While testing try these workarounds:
Put all page related files (.html, .jpg, .js, .css, etc) on your desktop (not in sub-folders).
Post your images to a site that supports cross-domain sharing (like dropbox.com or GitHub). Be sure you put your images in dropbox's public folder and also set the cross origin flag when downloading the image (
var img=new Image(); img.crossOrigin="anonymous"...)Install a webserver on your development computer (IIS and PHP web servers both have free editions that work nicely on a local computer).
In the img tag set crossorigin to Anonymous.
<img crossorigin="anonymous"></img>
If someone views on my answer, you maybe in this condition:
1. Trying to get a map screenshot in canvas using openlayers (version >= 3)
2. And viewed the example of exporting map
3. Using ol.source.XYZ to render map layer
Bingo!
Using ol.source.XYZ.crossOrigin = 'Anonymous' to solve your confuse.Or like following code:
var baseLayer = new ol.layer.Tile({ name: 'basic', source: new ol.source.XYZ({ url: options.baseMap.basic, crossOrigin: "Anonymous" }) });In OpenLayers6, something is changed with ES6. However, the code is similar.
import { XYZ } from 'ol/source'import { Tile as TileLayer } from 'ol/layer'const baseLayer = new TileLayer({ name : 'basic', source: new XYZ({ url: 'example.tile.com/x/y/z', // your tile url crossOrigin: 'Anonymous', // remove this function config if the tile's src is nothing to decorate. It's usually to debug the src tileLoadFunction: function(tile, src) { tile.getImage().src = src } }) })What's more, don't forget to set the access-control-allow-origin: * or access-control-allow-origin: [your whitelist origins] in the response header if the tiles are requested in your own server.
Like this:
More details, and this one