Loading

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 @ 2024-04-17 09:27  gaolegaoya  阅读(158)  评论(0编辑  收藏  举报