如何合并p5.js画布与WebGL地图画布并导出为可保存图片？

不需要手动解析WebGL的pixels数组，直接利用Canvas元素的通用API就能实现，步骤如下：

• 获取目标画布元素
  先拿到两个画布的DOM对象：

  • p5.js的画布默认ID是defaultCanvas0（如果创建时指定了ID就用自定义的）
  • 地图API生成的WebGL画布，通过其所在的div容器去查询，比如document.getElementById('map-container').querySelector('canvas')

• 创建临时合并画布
  创建一个2D上下文的临时画布，尺寸与两个目标画布保持一致：

  const mapCanvas = document.getElementById('map-container').querySelector('canvas');
  const p5Canvas = document.getElementById('defaultCanvas0');
  
  const tempCanvas = document.createElement('canvas');
  const ctx = tempCanvas.getContext('2d');
  tempCanvas.width = mapCanvas.width;
  tempCanvas.height = mapCanvas.height;
  

• 叠加画布内容
  先绘制WebGL地图画布作为底层，再绘制p5.js的标注画布作为顶层（确保p5画布背景透明，避免遮挡地图）：

  // 绘制地图底层
  ctx.drawImage(mapCanvas, 0, 0);
  // 绘制p5标注顶层
  ctx.drawImage(p5Canvas, 0, 0);
  

• 触发保存操作
  通过临时画布的toDataURL()生成图片链接，创建下载按钮实现保存：

  const downloadLink = document.createElement('a');
  downloadLink.href = tempCanvas.toDataURL('image/png');
  downloadLink.download = 'map-with-annotations.png';
  downloadLink.click();
  

注意事项 #

• 如果地图画布存在跨域限制，需要在地图API初始化时设置crossOrigin相关参数（具体参考对应地图服务的文档），否则toDataURL()会抛出安全错误。
• p5.js画布需要设置透明背景，在setup()里添加background(0, 0)（第二个参数为透明度），避免不透明背景覆盖地图内容。

内容的提问来源于stack exchange，提问作者erik