Export Map Error from OpenLayers 3 in Chrome?

Question

Im using this js file to export map in Openlayers 3 in Google Chrome but i'm getting en error saying that Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. I also set an cross Origin attribute as anonymous. The function of export button is as follow

var exportPNGElement = document.getElementById('export-png');
exportPNGElement.crossOrigin = "anonymous";
 if ('download' in exportPNGElement) {
 exportPNGElement.addEventListener('click', function(e) {
 map.once('postcompose', function(event) {
 var canvas = event.context.canvas;
 exportPNGElement.href = canvas.toDataURL('image/png');
 });
 map.renderSync();
 }, false);
 } else {
 var info = document.getElementById('no-download');
 /**
 * display error message
 */
 info.style.display = '';
 }

• pavlos: This is a CORS problem of your images consisting your map. What sort of layers exist within the image you are trying to export?
• Satya Chandra: My layers consists of administrative boundaries and I enabled CORS extension in Chrome!
• pavlos: You have to enable CORS on the server side. Enable it on client doesnt help. I am asking the type of layer , is it geoserver for example? If yes you have to enable CORS on geoserver side.

Answer 1

try adding crossOrigin: 'Anonymous' to the layer sources !

Answer 2

Try to change it something like that:

function exportPNGElement() {
 map.once('postcompose', function(event) {
 var canvas = event.context.canvas;
 if (navigator.msSaveBlob) {
 navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
 } else {
 canvas.toBlob(function(blob) {
 saveAs(blob, 'map.png');
 });
 }
 });
 map.renderSync();
 };

• Satya Chandra: I tried this one also but same error..
• Moh: @Hyma I am working with this function and it works in all browsers, try to check your code. (why your canvas is tainted)