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

结果效果如下：