为何html2canvas无法截取model viewer展示的3D模型？

核心原因 #

html2canvas依赖DOM节点的样式和布局信息生成截图，而model-viewer是通过WebGL在内部canvas上渲染3D内容，这部分内容不在html2canvas的DOM捕获范围内，所以无法直接截取。

可行方案 #

1. 使用model-viewer自带的截图API

model-viewer提供了toBlob()方法，可以直接获取3D模型当前帧的Blob对象，再转成图片用于截图拼接：

const modelViewer = document.querySelector('model-viewer');
// 获取模型当前帧的Blob
modelViewer.toBlob().then(blob => {
  // 将Blob转为图片元素
  const img = new Image();
  img.src = URL.createObjectURL(blob);
  img.onload = () => {
    // 创建临时容器放置模型截图，位置与原model-viewer对齐
    const tempContainer = document.createElement('div');
    tempContainer.style.position = 'absolute';
    tempContainer.style.top = modelViewer.offsetTop + 'px';
    tempContainer.style.left = modelViewer.offsetLeft + 'px';
    tempContainer.style.width = modelViewer.offsetWidth + 'px';
    tempContainer.style.height = modelViewer.offsetHeight + 'px';
    tempContainer.style.zIndex = '9999';
    tempContainer.appendChild(img);
    document.body.appendChild(tempContainer);

    // 调用html2canvas截取整个页面
    html2canvas(document.body).then(canvas => {
      // 处理截图结果，示例：添加到页面展示
      const screenshotImg = new Image();
      screenshotImg.src = canvas.toDataURL();
      document.body.appendChild(screenshotImg);
      // 移除临时容器
      document.body.removeChild(tempContainer);
    });
  };
});

2. 直接合并WebGL canvas和页面截图

如果需要更灵活的拼接逻辑，可以先获取model-viewer内部的WebGL canvas，再用html2canvas截取页面其他部分，最后用Canvas API合并两者：

const modelViewer = document.querySelector('model-viewer');
// 获取model-viewer内部的WebGL canvas
const glCanvas = modelViewer.shadowRoot.querySelector('canvas');

// 先隐藏模型，截取页面其他部分
modelViewer.style.visibility = 'hidden';
html2canvas(document.body).then(pageCanvas => {
  modelViewer.style.visibility = 'visible';
  
  // 创建用于合并的canvas
  const mergeCanvas = document.createElement('canvas');
  mergeCanvas.width = pageCanvas.width;
  mergeCanvas.height = pageCanvas.height;
  const ctx = mergeCanvas.getContext('2d');
  
  // 绘制页面截图
  ctx.drawImage(pageCanvas, 0, 0);
  // 将3D模型canvas绘制到对应位置
  ctx.drawImage(glCanvas, modelViewer.offsetLeft, modelViewer.offsetTop, modelViewer.offsetWidth, modelViewer.offsetHeight);
  
  // 处理合并后的截图，示例：添加到页面展示
  const finalImg = new Image();
  finalImg.src = mergeCanvas.toDataURL();
  document.body.appendChild(finalImg);
});

注意事项 #

• 调用toBlob()前，需确保模型已加载完成，可监听model-viewer的load事件再执行截图逻辑。
• 跨域模型可能触发Canvas污染问题，需确保模型资源配置了正确的CORS头。

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