如何实现Canvas多视角（前后左右）截图并将图片整合导出为PDF

核心实现流程 #

分为三个核心环节：视角切换控制、多视角异步采集、多图合并导出PDF。

1. 视角切换逻辑 #

你需要先确定当前Canvas使用的渲染框架，以常用的Three.js 3D场景为例，前后左右四个视角对应相机沿Y轴分别旋转0°、90°、180°、270°，每次切换视角后需要等待场景渲染完成再执行截图操作，避免捕获到未渲染完成的帧。
提前定义好四个视角的配置：

// 四个视角对应的Y轴旋转弧度
const viewAngles = [0, Math.PI / 2, Math.PI, Math.PI * 3 / 2]
// 存储所有采集到的视角图片base64
const viewImages = []

2. 多视角异步采集 #

因为视角切换和渲染都是异步操作，不能用同步循环采集，需要封装异步采集逻辑保证顺序执行：

// 单视角截图函数，返回Promise保证异步执行顺序
function captureSingleView() {
  return new Promise((resolve) => {
    // 等待浏览器下一帧渲染完成后再截图
    requestAnimationFrame(() => {
      const canvas = document.getElementsByTagName("canvas")[0]
      // 第二个参数为导出PNG的质量，范围0-1，可按需调整
      const imgBase64 = canvas.toDataURL("image/png", 0.9)
      resolve(imgBase64)
    })
  })
}

// 批量采集四个视角
async function captureAllViews() {
  viewImages.length = 0
  for (let i = 0; i < viewAngles.length; i++) {
    // 此处替换为你的项目实际的视角切换逻辑
    // 如果是Three.js场景且用OrbitControls控制视角，写法如下：
    camera.rotation.y = viewAngles[i]
    controls.update()
    // 等待当前视角截图完成再切换下一个
    const currentImg = await captureSingleView()
    viewImages.push(currentImg)
  }
  // 全部采集完成后生成PDF
  generatePDF()
}

3. 多图合并生成PDF #

图片合并需要用到前端PDF处理库jsPDF，你可以提前将该库的UMD格式离线包引入到项目中，无需额外后端支持。
PDF生成逻辑示例：

function generatePDF() {
  const { jsPDF } = window.jspdf
  // 初始化PDF：纵向排版、单位pt、尺寸为A4
  const doc = new jsPDF('p', 'pt', 'a4')
  const pageWidth = doc.internal.pageSize.getWidth()
  const pageHeight = doc.internal.pageSize.getHeight()
  // 自定义边距
  const padding = 20
  // 单张图片的宽高，四图纵向排列在同一页的计算方式
  const imgWidth = pageWidth - padding * 2
  const imgHeight = (pageHeight - padding * 5) / 4

  for (let i = 0; i < viewImages.length; i++) {
    // 计算每张图的纵向位置
    const imgY = padding + i * (imgHeight + padding)
    doc.addImage(viewImages[i], 'PNG', padding, imgY, imgWidth, imgHeight)
    // 如果需要每个视角单独占一页，替换为以下逻辑：
    // doc.addImage(viewImages[i], 'PNG', padding, padding, imgWidth, pageHeight - padding * 2)
    // if (i !== viewImages.length - 1) doc.addPage()
  }
  // 导出PDF文件
  doc.save('车棚多视角图纸.pdf')
}

4. 修改触发逻辑 #

替换你原来的点击事件绑定即可：

document.getElementById('save').onclick = () => {
  captureAllViews()
}

注意事项 #

• 如果你使用的不是Three.js框架，只需替换视角切换部分的代码为项目当前的视角控制逻辑即可
• 如果Canvas加载了跨域纹理资源，需要提前给资源配置跨域响应头，否则toDataURL会触发安全报错
• 若导出的图片模糊，可调整toDataURL的质量参数，或导出2倍分辨率的Canvas后再缩放到PDF中

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