使用跨域的javascript在本地将画布保存为png

Question

我想保存画布标签的图像，但是当我尝试从画布创建图像时，它告诉我“SecurityError：操作不安全”，我认为这是来自另一个域的画布问题我上线了。此画布是使用 openlayers3 生成的地图。

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

我也试过了

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

是否有一个简单的解决方法可以使画布不被污染？

Answer 1

您尝试从另一个窗口在新的浏览器窗口中写入，如果没有 https 协议或 localhost，这是不可能的。但是您可以在当前窗口中创建新的 img。

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