来自视频和图像/蒙版的画布 drawImage() 尺寸

Question

我有一个容器，上面有一个视频元素和一个遮罩图像，如下所示：

<div id="container">
    <img id="mask" src="/images/mask.png" width="1078" height="1508" />
    <video autoplay="" id="video"></video>
</div>

正如你们所见，蒙版图像的宽度为 1078 像素，高度为 1508 像素。视频元素也是 1078px 宽，但只有 807px 高（不必更长）。

canvas 元素具有相同的宽度和高度。当我尝试拍摄视频快照并将该快照和蒙版图像的副本绘制到画布时，两个元素都被拉伸到画布边界之外。

var context = canvas.getContext('2d');

// Draw video
context.drawImage(video, 0, 0);

// Get mask image and draw mask
maskObj.src = document.getElementById("mask").src;
context.drawImage(maskObj, 0, 0);

我知道我可以通过drawImage() 函数传递更多参数，但我不知道其他参数的具体用途。 This 文章说您可以将宽度和高度作为整数传递。但如果我执行以下操作：

context.drawImage(video, 0, 0, 1078, 807);
context.drawImage(maskObj, 0, 0, 1078, 1508);

它仍然在画布边界之外绘制元素。 无法真正找出我做错了什么，因此感谢所有帮助。

示例；

Answer 1

它应该发生的唯一方法是使用 css 设置画布的大小。尝试使用 html 属性更改画布的大小，或者添加以下内容：

canvas.width  = 1078;
canvas.height = 1508;
var context = canvas.getContext('2d');

画布的分辨率仅取决于这些属性。 CSS 的宽度和高度只是拉伸它。

Answer 2

您所要做的就是获取视频尺寸并将画布宽度和高度设置为如下值：

var video = document.getElementById('video');

canvas.height = video.videoHeight;
canvas.width = video.videoWidth;

var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);