如何截取包含Three.js画布与HTML+CSS的React应用全屏截图？

问题分析 #

• 用html2canvas生成空图：一是代码里异步处理错误（直接把Promise赋值给了url），二是Three.js的WebGL画布默认会清除渲染缓冲区，导致html2canvas捕获不到内容。
• 用Blob克隆DOM的方案：仅复制了DOM结构，没有导出Three.js画布的渲染内容，所以画布部分为空。

方案一：修复html2canvas的使用方式 #

1. 修正异步代码逻辑 #

html2canvas返回的是Promise，不能直接将其赋值给screenshotObject.url，需要用async/await或在then回调内处理结果：

async function captureScreenshot() {
  const element = document.getElementsByClassName("contentContainer-5")[0] as HTMLElement;
  try {
    const canvas = await html2canvas(element, {
      allowTaint: true,
      useCORS: true,
      logging: false // 可选，关闭日志减少干扰
    });
    const dataUrl = canvas.toDataURL();
    return {
      url: dataUrl,
      width: 128,
      height: 64
    };
  } catch (err) {
    console.error("截图失败:", err);
    return null;
  }
}

2. 确保Three.js画布可被捕获 #

在初始化Three.js的WebGLRenderer时，开启preserveDrawingBuffer，这样渲染后的内容不会被自动清除：

const renderer = new THREE.WebGLRenderer({
  preserveDrawingBuffer: true, // 关键配置
  // 其他配置如antialias等
});

方案二：改进Blob克隆DOM的方案 #

克隆DOM后，需要手动导出每个Three.js画布的内容，替换克隆元素中的canvas为带内容的图片：

takeScreenshot() {
  // 克隆整个文档元素
  const screenshot = document.documentElement.cloneNode(true) as HTMLElement;
  // 遍历所有canvas元素
  const canvases = screenshot.querySelectorAll("canvas");
  canvases.forEach(canvas => {
    // 导出canvas的dataURL
    const dataUrl = canvas.toDataURL();
    // 创建img元素替换原canvas
    const img = document.createElement("img");
    img.src = dataUrl;
    img.width = canvas.width;
    img.height = canvas.height;
    // 复制原canvas的样式
    img.style.cssText = canvas.style.cssText;
    canvas.parentNode?.replaceChild(img, canvas);
  });
  // 生成包含画布内容的HTML Blob
  const blob = new Blob([screenshot.outerHTML], {
    type: 'text/html'
  });
  return blob;
}

generate() {
  window.URL = window.URL || window.webkitURL;
  window.open(window.URL.createObjectURL(this.takeScreenshot()));
}

额外注意事项 #

• 如果应用中有动态渲染的内容，确保截图触发时机在内容完全渲染完成之后（比如React的useEffect钩子内，确保Three.js场景已渲染）。
• 若使用了CSS transform或复杂样式，html2canvas可能需要额外配置（如scale参数）来保证截图精度。

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