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

Question

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

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

你们可以看到掩模图像宽度为1078像素，高度为1508像素。视频元素的宽度也是1078像素，但高度只有807像素（不必更长）。

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);