html2canvas截取专题图(包含地图)

html2canvas截取专题图(包含地图)

问题:html2canvas截取地图时地图空白,报错: Unable to clone WebGL context as it has preserveDrawingBuffer=false

一、情况介绍:#

​ 使用如下代码进行截图时,出现地图空白情况,报错: Unable to clone WebGL context as it has preserveDrawingBuffer=false ,地图使用的框架为mapbox

const exportSave = async () => {
    const element = document.getElementById('mapCanvasId');
    const options = { scale: 2, backgroundColor: null, }
    html2canvas(element, options).then((canvas) => {
      const png = canvas.toDataURL("image/png");  // 拿到截图后转换为png图片
      // 下载
      down(png, '我的制图')
    });
}
const down = function (url, name) {
  // 创建a标签
  const vectorDom = document.createElement('a')
  vectorDom.href = url
  vectorDom.download = name ? name : url.split(/[//]/).pop()
  // console.log(name)
  // 不显示a标签
  vectorDom.setAttribute('display', 'none')
  document.body.appendChild(vectorDom)
  vectorDom.click()
  setTimeout(() => {
    document.body.removeChild(vectorDom)
  }, 500)
}

二、解决办法:#

​ 在地图初始化时添加添加如下代码:

preserveDrawingBuffer: true

结果效果如下:

posted @   gaolegaoya  阅读(506)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
点击右上角即可分享
微信分享提示
主题色彩