Save canvas as png locally with javascript with Cross doimain

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?

Possible duplicate of [canvas.toDataURL() Security Error The operation is insecure](https://stackoverflow.com/questions/25753754/canvas-todataurl-security-error-the-operation-is-insecure) — Atul Sharma, Jul 24 '18 at 13:34

score 0 · Answer 1 · answered Jul 24 '18 at 14:12

0

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);
}

answered Jul 24 '18 at 14:12

Mr.Js

96
7

Can't run `var dataURL = canvas.toDataURL('image/png')` cause the canvas is tainted – Lars Karlsen Jul 24 '18 at 20:59
Try swap `var canvas = document.getElementsByClassName('ol-unselectable')[0]; ` on `var canvas = document.getElementById('canvas_id');` – Mr.Js Jul 25 '18 at 09:24
The canvas tag is generated by openlayers 3. – Lars Karlsen Jul 25 '18 at 11:03

Save canvas as png locally with javascript with Cross doimain

1 Answers1