移动端Web应用如何将视频流适配到定位画布实现无缝重合？

核心问题根因 #

你现有代码的错位问题主要来自3个错误逻辑：

• drawImage的源裁剪参数误用了页面CSS坐标：drawImage传入的第2~5位参数是视频原始帧的像素裁剪坐标，你直接传入canvas在页面的偏移量20、topview，和视频本身的分辨率单位完全不匹配，必然出现裁剪错位。
• 定时器逻辑不合理：1ms的setInterval和浏览器渲染节奏不同步，不仅性能损耗高，还容易出现画面撕裂、偏移。
• 精度和像素比缺失：比例计算时先除后乘会放大精度误差，同时没有考虑移动端devicePixelRatio的高清屏适配，容易出现半像素偏移、画面模糊。

完整修复代码 #

1. 先添加公共样式保证定位和缩放规则一致 #

/* 你放置video和canvas的父容器，比如直接给body设置 */
.media-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
video, canvas {
  position: absolute;
  top: 0;
  left: 0;
  /* 关键：保证video缩放规则和canvas绘制逻辑对齐，如果你用其他填充规则这里同步修改即可 */
  object-fit: cover;
}

2. 修正参数计算逻辑 #

const dpr = window.devicePixelRatio || 1;
const iw = window.innerWidth;
const ih = window.innerHeight;
// 替换为你从URL参数解析得到的w、h
const urlParams = new URLSearchParams(window.location.search);
const w = parseInt(urlParams.get('w')) || 260;
const h = parseInt(urlParams.get('h')) || 220;

// 尺寸计算：先乘后除减少精度损失
const largview = iw - 40;
const heightview = Math.round(largview * h / w);
const topview = Math.round((ih - heightview) / 2);

// 设置video全屏展示
video.style.width = `${iw}px`;
video.style.height = `${ih}px`;

// 设置canvas参数：内在宽高适配高清屏，css尺寸和目标区域一致
canvas.width = largview * dpr;
canvas.height = heightview * dpr;
canvas.style.left = '20px';
canvas.style.top = `${topview}px`;
canvas.style.width = `${largview}px`;
canvas.style.height = `${heightview}px`;

// 画布缩放适配像素比，保证绘制坐标和css尺寸对应
const context = canvas.getContext('2d');
context.scale(dpr, dpr);

3. 修正绘制逻辑，替换定时器为帧同步渲染 #

function renderFrame() {
  // 直接把整个video按页面展示尺寸绘制，偏移负的canvas坐标即可精准截取对应区域
  context.drawImage(video, -20, -topview, iw, ih);
  requestAnimationFrame(renderFrame);
}

// 等video加载完成可播放后再启动渲染，避免空白
video.addEventListener('canplay', () => {
  renderFrame();
}, { once: true });

额外调试说明 #

如果还有极细微的偏移，可以做这两项检查：

• 确认video和canvas的父容器没有额外的padding、border影响定位，必要时给父容器加box-sizing: border-box。
• 给canvas添加transform: translateZ(0)强制开启硬件加速，避免移动端浏览器半像素渲染偏移。

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