为什么ctx.drawImage只将视频元素的一部分绘制到画布上

Why is ctx.drawImage only drawing part of the video element to canvas?

本文关键字：绘制 一部分 元素 drawImage ctx 视频 为什么      更新时间：2023-09-26

我正在尝试使用ctx.DrawImage将电影帧绘制到画布元素，并且得到了我认为非常奇怪的缩放/裁剪行为。

首先，这是我的代码：

.HTML 

<body>
    <video autoplay width="125" height="125"></video>
    <img src="">
    <canvas></canvas>
</body>

Javascript：

    var video = document.querySelector('video');
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;
    function snapshot() {
        if (localMediaStream) {
            ctx.drawImage(video, 0, 0, 125, 125);
            document.querySelector('img').src = canvas.toDataURL('image/webp');
        }
    }   
video.addEventListener('click', snapshot, false);
navigator.getUserMedia(
    {
        video: true
    }, function(stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
});

这样做基本上是从视频中获取静止图像并将其挤压，使其大约是原始宽度的 1/3 和高度的 70%。这是令人沮丧的。

离开125，只使用ctx.drawImage(video, 0, 0)用静止图像填充画布，但是，它只是图像的左上角(25%(。 这也令人沮丧。

如何使画布绘制与正在播放的视频元素完全相同的图像大小？

这与视频元素本身确实是125px x 125px的事实相结合，但我的因为纵横比，视频元素周围有信箱(空白(。 有没有办法强制视频元素用传入的视频流填充自身？

当我尝试时，我也面临着同样的问题......

var sw = video.offsetWidth, // source width
    sh = video.offsetHeight, // source height
    dw = canvas.width, // destination width
    dh = canvas.height; // destination height
ctx.drawImage(video, 0, 0, sw, sh, 0, 0, dw, dh);

当我更改为：

ctx.drawImage(video, 0, 0, dw, dh);

我相信在您的情况下，问题是，125是视频元素的高度和宽度，但您应该提供的是画布高度和宽度，例如，设置画布宽度和高度：

canvas.width = 125;
canvas.height = 125;
ctx.drawImage(video, 0, 0, 125, 125);

我正在使用网络摄像头(具有navigator.getUserMedia功能(。 网络摄像头分辨率明显更高，因此，即使视频元素和画布的大小相同，捕获的图像也比可以容纳的要大得多。

解决方案是添加一个constrain属性，使媒体流也125px x 125px

这似乎是一个非常古老的问题，但几天前我面临着类似的挑战。

利用CSS视口单位来设置画布的高度和宽度，并调整标签的大小，节省了我的一天。

视口单位允许您将元素和字体大小调整为用户屏幕(视口(总宽度或高度的百分比。

这就是我在代码中的实现方式

视频标签

<video id="video" style="height: calc(25vh - 15px); width: calc(25vh - 15px); border: 1px solid gray;" autoplay playsinline></video>

您可以在此处阅读有关它们的更多信息 https://alligator.io/css/viewport-units/

相关文章：