Unable to clone WebGL context as it has preserveDrawingBuffer=false

地图使用的框架为mapbox

使用如下代码进行截图时，出现地图空白情况

import html2canvas from "html2canvas";
  
html2canvas(document.getElementById("map"), {
    logging: true,
    useCORS: true,
    foreignObjectRendering: false,
    allowTaint: false,
  }).then((canvas) => {
    // document.body.appendChild(canvas);
    var dataUrl = canvas.toDataURL();
    var a = document.createElement("a");
    a.setAttribute("href", dataUrl);
    a.setAttribute("download", "image.png");
    document.body.appendChild(a);
    a.click();
    a.remove();
  });

创建地图的时候添加preserveDrawingBuffer，并设置为ture

  // 创建地图
  map.value = markRaw(
    new Map({
      container: map.value,
      style: MapStyle.STREETS,
      preserveDrawingBuffer: true,
      center: [116.395645038, 39.9299857781],
      zoom: 8.5,
      minZoom: 4,
      maxZoom: 22,
    })
  );