Question

我正在使用context.drawImage从video元素绘制到canvas，但是我的相机的纵横比是4x3。

因此，假设我的video的宽度为400，高度为300，那么我想将上半部分（400x150）绘制到画布上（或中间，没关系，只要是它的一半即可）高度）。

我尝试过的所有操作都会使图像的宽高比变形或以相同的4x3宽高比绘制，这意味着它会缩小到200x150，然后缩放以适合我的400x150画布，即它绘制了一半的高度，但也将宽度减少了一半。

有什么办法解决吗？

Answer 1

根据注释，如下所示：

let video = document.createElement('video');
video.addEventListener('canplay', function() {
  let w = video.videoWidth;
  let h = video.videoHeight;
  let canvas = document.getElementById('canvas');
  // cut top half and scale it to 50% canvas
  canvas.width  = w/2;
  canvas.height = h/4;
  let ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, w, h/2, 0, 0, w/2, h/4)
});
video.src = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4#t=10";

<canvas id="canvas"></canvas>

将视频的上半部分绘制到画布HTML

1 个答案: