我已经浪费了无数个小时试图弄清楚为什么我的 Canvas 没有使用 drawImage 函数正确地从我的视频元素中绘制数据。
下面的 sn-p 是我最初尝试的，只是为了将准确的视频输出输出到我的画布：
this.canvasContext.drawImage(this.mainVideoElement, 0, 0);
但是，这只输出了我的视频元素当前内容左上角的一个小矩形。然后，我尝试了drawImage 文档中定义的参数的各种变体，即使在手动定义了我的高度/宽度之后，我的画布中的结果也比视频内容的分辨率低很多（至少 5-10 倍）。
【问题讨论】：
标签： javascript html css canvas
令我沮丧的是，这整个问题来自于我在我的 css 文件中使用“px”单位设置画布大小的事实。直接在 html 定义中设置宽度和高度后，它开始正常运行并再次输出高分辨率。
显然，使用 'px' 单位完全破坏了与 drawImage 函数相关的 Canvas 行为。我太累了，无法进一步研究，但如果您的 drawImage 行为不端，请确保使用 width 和 height 属性直接在 html 中定义画布大小。
编辑： 或者，我发现您可以使用 CSS 来设置画布大小。只需确保在调用 drawImage 之前在 JavaScript 中执行以下操作：
this.mainCanvasElement.width = this.mainCanvasElement.clientWidth;
this.mainCanvasElement.height = this.mainCanvasElement.clientHeight;
【讨论】：