MediaPipe JS中使用html2canvas捕获Canvas报错，求解决方案

错误原因分析 #

你遇到的TypeError: cannot read properties of undefined (reading 'toDataURL')是因为html2canvas返回的是Promise对象，你没有等待它解析完成就直接尝试访问canvas[1]，而且就算解析完成，返回的也是单个Canvas实例，不是数组，所以canvas[1]必然是undefined。

修复html2canvas的方案 #

修改截图函数，正确处理异步逻辑：

const takeScreenShot = async () => {
  const screenshotTarget = document.querySelector('.output_canvas');
  
  // 等待html2canvas返回Canvas实例
  const canvas = await html2canvas(screenshotTarget, {
    allowTaint: true,
    foreignObjectRendering: true
  });
  
  // 直接调用canvas的toDataURL，而非canvas[1]
  const base64image = canvas.toDataURL();
  
  // 存储到sessionStorage
  sessionStorage.setItem('capturedCanvas', base64image);
  
  // 示例：跳转到展示页面
  // window.location.href = 'display.html';
};

// 延时执行截图
setTimeout(async () => {
  await takeScreenShot();
}, 8000);

更高效的替代方案：直接使用MediaPipe的Output Canvas #

既然要捕获的是MediaPipe已经渲染好的output_canvas，完全不需要依赖html2canvas，直接调用这个Canvas元素本身的toDataURL()方法即可，避免额外渲染开销和潜在问题：

const takeScreenShot = async () => {
  const outputCanvas = document.querySelector('.output_canvas');
  
  // 直接从原Canvas获取Base64编码
  const base64image = outputCanvas.toDataURL('image/png');
  
  // 存储到sessionStorage
  sessionStorage.setItem('capturedCanvas', base64image);
  
  // 存储到Firestore（假设已初始化Firebase）
  // await firebase.firestore().collection('captures').add({
  //   imageData: base64image,
  //   timestamp: new Date()
  // });
};

setTimeout(async () => {
  await takeScreenShot();
}, 8000);

后续页面展示方法 #

在目标页面中，从存储读取数据并渲染：

<!-- 展示页面的HTML -->
<img id="capturedImage" alt="捕获的MediaPipe画布">

<script>
// 从sessionStorage读取
const savedImage = sessionStorage.getItem('capturedCanvas');
if (savedImage) {
  document.getElementById('capturedImage').src = savedImage;
}

// 从Firestore读取（示例）
// async function loadImageFromFirestore() {
//   const doc = await firebase.firestore().collection('captures').orderBy('timestamp', 'desc').limit(1).get();
//   if (!doc.empty) {
//     const data = doc.docs[0].data();
//     document.getElementById('capturedImage').src = data.imageData;
//   }
// }
// loadImageFromFirestore();
</script>

注意事项 #

• 若使用Firestore存储Base64数据，需注意单文档大小限制（最大1MB），图片过大时可先压缩再存储，或上传至Firebase Storage后存储文件链接。
• 直接使用原Canvas的方法不会触发跨域限制，因为Canvas内容为同源渲染生成。

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