Question

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

首先，这是我的代码：

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的事实相结合，但由于纵横比，我在视频元素周围有字母装箱（白色空间）。有没有办法强制视频元素用传入的视频流填充自己？

Answer 1

当我尝试时，我也遇到了同样的问题...

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);

Answer 2

我正在使用网络摄像头（使用navigator.getUserMedia功能）。网络摄像头的分辨率要高得多，因此，即使视频元素和画布的大小相同，拍摄的图像也要大得多。

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

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

2 个答案: