使用Cross doimain用javascript将画布另存为png

Question

I want to save an image of the canvas tag, but when i try create an image from the canvas it tells me "SecurityError: The operation is insecure", which i believe is problems with the canvas coming from another domain than what im on. This canvas is a map which is generated with openlayers3.

var canvas = document.getElementsByClassName('ol-unselectable')[0];
var dataURL = canvas.toDataURL('image/png');
var window = window.open();
window.document.write('<img src='+dataURL+'/>');

I've also tried

canvas.toBlob(function(blob) {
saveAs(blob, 'map.png')
}

Is there an easy work around so the canvas is not tainted?

Answer 1

You tried write in new browser window from another window this is impossible without https protocol or localhost. But you can create new img in currently window.

 var canvas = document.getElementsByClassName('ol-unselectable')[0]; var dataURL = canvas.toDataURL('image/png'); var img = new Image(); img.width = 1000; img.height = 1000; img.src = dataURL; img.onload = function () { document.body.append(img); }