当我在canvas上呈现视频元素时,我无法按比例缩放视频帧。
我尝试过的:
我阅读了如何在canvas中按比例调整图像大小? 的选定答案,但它对我没有起作用。我正在呈现HTML5视频帧,而不是图像。这可能看起来很不寻常,因此这里解释一下:video + canvas = magic
我试图适应相关问题的答案时遇到的问题可能是:
- 也许视频大小与图像不同。
- 也许我错误地将针对特定情况使用的答案转换为我的答案,因为它在多个位置使用混淆的静态测量值(“300”),而没有真正解释它们。
到目前为止我所拥有的:
目前,我的播放器可以适应视频并使其填充,但会拉伸以适应。
context.drawImage(videoPlayer, 0, 0, canvasPlayer.width, canvasPlayer.height);
//canvasPlayer -> HTML5 canvas, videoPlayer -> HTML5 video element
我想知道(分别):
如何在垂直方向上填充高度,同时保持比例。
如何在水平方向上填充宽度,同时保持比例。
我该怎么做?
canvas
没有太多的经验,但是我知道在处理流体视频元素时,CSS 无法保持宽高比时我需要使用一种实质性的 hack 方法,即利用 padding 进行填充。这篇文章 是我在很多情况下所参考的。 - aug