求助：Canvas无法完整捕获特定视频帧的解决方法

核心原因 #

你的视频大概率存在实际像素尺寸与显示尺寸不匹配的情况（比如视频编码时的像素宽高比和播放时的显示宽高比不一致），原Fiddle代码用了视频的显示宽高而非真实像素尺寸，导致绘制时裁剪了帧内容。

具体修复步骤 #

1. 获取视频真实像素尺寸
   不要直接用video.width/video.height（这是显示尺寸），改用video.videoWidth和video.videoHeight，这两个属性返回视频帧的原始像素大小。

2. 同步Canvas尺寸到视频真实尺寸
   将Canvas的宽高设置为视频的真实像素尺寸，避免拉伸或裁剪。

3. 完整绘制视频帧
   使用drawImage时，传入视频的真实尺寸参数，确保完整绘制整个帧。

修改后的代码示例 #

替换原Fiddle中的capture函数为以下代码：

function capture() {
  const video = document.getElementById('video');
  const canvas = document.getElementById('canvas');
  const outputImg = document.getElementById('output');

  // 确保视频已加载足够元数据
  if (video.readyState < 2) {
    alert('视频未加载完成，请稍后再试');
    return;
  }

  // 获取视频真实像素尺寸
  const realWidth = video.videoWidth;
  const realHeight = video.videoHeight;

  // 设置Canvas为真实尺寸
  canvas.width = realWidth;
  canvas.height = realHeight;

  // 绘制完整视频帧
  const ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, realWidth, realHeight);

  // 导出并显示捕获的帧
  outputImg.src = canvas.toDataURL('image/png');
  // 调整预览图的显示尺寸（可选，避免过大）
  outputImg.style.maxWidth = '100%';
}

额外注意事项 #

• 跨域问题：在视频标签添加crossorigin="anonymous"，同时确保视频服务器返回Access-Control-Allow-Origin头，否则Canvas会被污染，无法正常导出或绘制帧。
• 视频加载时机：可以在视频的loadedmetadata事件触发后再允许捕获操作，确保真实尺寸已获取：

  document.getElementById('video').addEventListener('loadedmetadata', () => {
    console.log('视频元数据加载完成，可捕获帧');
  });
  

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