javascript - 来自视频和图像/蒙版的 Canvas drawImage() 尺寸

Question

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

<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 元素具有相同的宽度和高度。当我尝试拍摄视频快照并将该快照和蒙版图像的副本绘制到 Canvas 时，这两个元素都被拉伸(stretch)到 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);

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

例子；

Answer 1

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

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

Canvas 的分辨率仅取决于这些属性。 css 宽度和高度只是拉伸(stretch)它。