来自视频元素的drawImage行为不正常，分辨率也搞砸了
来自视频元素的drawImage行为不正常，分辨率也搞砸了
提问于 2020-07-19 10:45:35
我花了无数个小时试图弄清楚为什么我的画布没有正确地使用drawImage函数从我的视频元素中提取数据。
下面的片段是我最初尝试的，目的是将准确的视频输出输出到我的画布上：
this.canvasContext.drawImage(this.mainVideoElement, 0, 0);但是，这只是输出了我的视频元素当前内容左上角的一个小矩形。然后，我尝试了各种在drawImage文档中定义的参数的变化，甚至在手动定义我的高度/宽度之后，我的画布中的结果比视频内容的分辨率要低得多(至少5-10倍)。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-19 10:45:35
令我沮丧的是，整个问题来自于我在css文件中使用'px‘单元设置画布大小的事实。当在html定义中直接设置宽度和高度时，它开始正常工作，并再次输出高分辨率。
显然，使用'px‘单位完全破坏了与drawImage函数相关的画布行为。我太累了，无法进一步研究这个问题，但是如果您的drawImage行为不当，请确保使用width和height属性在html中直接定义画布大小。
编辑:或者，我发现您可以使用CSS来设置画布大小。只需确保在调用JavaScript之前在drawImage中执行以下操作：
this.mainCanvasElement.width = this.mainCanvasElement.clientWidth;
this.mainCanvasElement.height = this.mainCanvasElement.clientHeight;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62979244
复制相关文章
相似问题
腾讯云开发者
