使用html2canvas截取Google Maps无响应、地图区域空白问题求助

• 你使用的onrendered是html2canvas v0.5及更早版本的废弃回调语法，v1.0+版本已移除该配置，所以添加该配置后代码直接不执行，导致点击按钮无响应
• 移除useCORS后地图空白是因为Google Maps的瓦片图片属于跨域资源，没有CORS配置的话html2canvas无法将其读取绘制到canvas上

• 确认你使用的是html2canvas v1.0+正式版本，改用Promise链式调用替代废弃的onrendered写法
• 给Google Maps初始化完成后的所有瓦片img标签强制添加crossOrigin="anonymous"属性，保证跨域资源可被读取
• 保留useCORS: true配置，添加allowTaint: false避免跨域资源污染画布导致无法导出

function scrshot() {
  // 给地图内所有图片提前添加跨域属性，也可以在地图初始化完成后全局执行一次
  const mapImgs = document.querySelectorAll('#map img');
  mapImgs.forEach(img => {
    if (!img.crossOrigin) {
      img.crossOrigin = 'anonymous';
      // 重载图片确保跨域属性生效
      img.src = img.src;
    }
  });

  html2canvas(document.getElementById("map"), {
    useCORS: true,
    allowTaint: false,
    scale: window.devicePixelRatio // 可选配置，保证截图清晰度和屏幕显示一致
  }).then(canvas => {
    const a = document.createElement('a');
    a.href = canvas.toDataURL("image/png");
    a.download = 'portal_scrshot.png';
    a.click();
  }).catch(err => {
    console.error('截图生成失败：', err);
  });
}

• 如果引入Google Maps API的script标签没有加跨域属性，需要补充crossorigin="anonymous"
• 尽量不要使用第三方自定义Google Maps样式图层，部分自定义图层资源没有开放CORS权限会导致绘制失败
• 调试阶段可在html2canvas配置项添加logging: true，在控制台查看具体资源加载失败原因

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