将导出到PNG功能添加到OpenLayers

我将html2canvas与OpenLayers版本6.1.1相结合，以提供一个更好的导出到PNG的示例

我试图将OpenLayers站点上显示的示例合并到我的应用程序中，但它不能在所有浏览器上运行（特别是Safari）

使用这些javascript库和当前版本的OpenLayers（6.1.1），我添加了一个显示在地图上的按钮，该按钮具有以下功能：

var-button\u p=document.createElement（'button'）；
按钮_p.innerHTML='PNG'；
按钮标题=‘将地图导出为png’；
var pngfunction=function（）{
map.once（'rendercomplete'，函数（事件）{
html2canvas（document.getElementById（'map'））。然后（函数（canvas）{
var ctx=canvas.getContext（“2d”）；
var now=新日期（）；
var monthy=now.getMonth（）+1；//记住月份存储在编号为0-11的数组中
ctx.fillStyle=“#0000FF”；
ctx.font=“12px Arial”；
ctx.fillText（monthy++“-”+now.getDate（）+”-“+now.getFullYear（）+”+now.getHours（）+：“+（now.getMinutes（）<10？'0'：”）+now.getMinutes（）+”：“+（now.getSeconds（）<10？'0'：”）+now.getSeconds（），10，20）；
if（navigator.msSaveBlob）{
msSaveBlob（canvas.msToBlob（），'map.png'）；
}否则{
canvas.toBlob（函数（blob）{
saveAs（blob，'map.png'）；
});
}
});
});
renderSync（）；
};
按钮p.addEventListener（'click'，pngfunction，false）；

由于此按钮是“ol control”类的一部分，并且我不希望这些控件成为生成的PNG的一部分，因此我对这些项目进行了汇总，并应用以下代码将这些控件从PNG中删除：

var removals=document.getElementsByClassName（'ol-control'）；
对于（var i=0；i

但是，由于我想看到北箭头，我删除了我刚才使用以下命令添加到该控件的属性：

document.getElementsByClassName（'ol-rotate'）[0]。删除属性（'data-html2canvas-ignore'）；

查看一下以获取ol地图的图像。

我使用此选项将ol地图导出到png：

map.once（'rendercomplete'，function（）{
var target=map.getViewport（）；
//html2canvas过滤掉所有“ol控制”元素的选项
var配置选项={
信号元素：功能（目标）{
返回（target.className.indexOf（'ol-control'）！=-1）；}，
日志记录：false
};
html2canvas（目标、配置选项）
.then（功能（画布）{
canvas.toBlob（函数（blob）{
saveAs（blob，'map.png'）；
});
});
});你的问题是什么？谢谢分享你的方法。为了每个人的利益（并遵循本网站标准），您可以写一个关于您的目标的问题，并提供您的代码作为答案。好的，谢谢您的帮助。