使用object-fit: cover样式时，如何获取VIDEO元素的精确画布内容？

嘿，我完全懂你遇到的困扰——用object-fit: cover让视频完美适配div后，直接截图拿到的却是原始比例的视频画面，和页面上显示的裁剪/缩放效果对不上。其实核心问题是：object-fit只是改变了视频的显示方式，并没有修改视频本身的像素数据，所以直接按视频元素的宽高绘制canvas，自然拿不到处理后的画面。

下面是一步到位的解决方案，核心是模拟object-fit: cover的逻辑，精准计算出要从原始视频中截取哪一块区域，再绘制到和容器同尺寸的canvas上：

具体实现代码 #

// 获取关键元素
const video = document.getElementById('videoId');
const targetContainer = video.parentElement; // 假设video直接放在目标div内
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// 确保视频已加载完成（避免获取不到原始分辨率）
if (video.readyState < 2) {
  video.addEventListener('loadedmetadata', captureCoveredFrame);
} else {
  captureCoveredFrame();
}

function captureCoveredFrame() {
  // 让canvas和目标容器尺寸完全一致
  const containerWidth = targetContainer.clientWidth;
  const containerHeight = targetContainer.clientHeight;
  canvas.width = containerWidth;
  canvas.height = containerHeight;

  // 获取视频的原始分辨率（不是元素的样式宽高）
  const videoNaturalWidth = video.videoWidth;
  const videoNaturalHeight = video.videoHeight;

  // 计算cover模式下的缩放比例：取能填满容器的最大比例
  const scaleRatio = Math.max(
    containerWidth / videoNaturalWidth,
    containerHeight / videoNaturalHeight
  );

  // 计算需要从原始视频中截取的区域（居中裁剪）
  const cropWidth = containerWidth / scaleRatio;
  const cropHeight = containerHeight / scaleRatio;
  const cropX = (videoNaturalWidth - cropWidth) / 2;
  const cropY = (videoNaturalHeight - cropHeight) / 2;

  // 精准绘制：从原始视频的裁剪区域，拉伸/缩小到canvas尺寸
  ctx.drawImage(
    video,
    cropX, cropY, cropWidth, cropHeight, // 源视频的截取区域
    0, 0, containerWidth, containerHeight // canvas上的绘制区域
  );

  // 生成截图URL并赋值给img元素
  document.getElementById('myImage').src = canvas.toDataURL();
}

关键逻辑说明 #

drawImage方法支持9个参数，我们就是利用这个特性来模拟object-fit: cover：

1. 先算出能让视频填满容器的缩放比例，确保视频不会出现黑边
2. 根据缩放比例，反向计算出原始视频中需要截取的居中区域（这就是页面上实际显示的内容）
3. 把截取的原始视频区域，精准绘制到和容器同尺寸的canvas上，得到和页面显示完全一致的截图

注意事项 #

• 一定要用video.videoWidth和video.videoHeight获取原始分辨率，不要用video.width/video.height（那是元素的样式尺寸）
• 确保视频加载完成后再执行截图逻辑，否则会获取不到原始分辨率
• 如果页面有缩放（比如系统DPI缩放、浏览器页面缩放），可以用targetContainer.getBoundingClientRect().width替代clientWidth，获取更精准的容器显示尺寸

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