html - 将 HTML5 视频渲染到 Canvas 会压缩图像

Question

我正在尝试使用 getUserMedia 从用户的网络摄像头拍摄照片。

来自相机的图像是 640x480(大概可以是任何尺寸，具体取决于用户的网络摄像头)。

我有一个视频标签，大小为 320x240，带有 css，我正在将网络摄像头图像渲染到它上面，如下所示:

var $video = $('video');
navigator.getUserMedia({ video: true }, function (stream) {
    $video[0].mozSrcObject = stream;
    $video[0].play();
    localMediaStream = stream;
}, function () {
    console.log('sadtrombone.com');
});

这很好用。

然后，我像这样拍一张照片/静帧:

var ctx = $canvas[0].getContext('2d');
ctx.drawImage($video[0], 0, 0, $canvas[0].width, $canvas[0].height);

这会将图像绘制到 Canvas 上，但看起来有点模糊:/

然后，如果我这样做:

$('img).attr('src', $canvas[0].toDataURL('image/png'));

这将 Canvas 呈现为图像元素，但图像被压扁，它的 300x150 :/

$canvas[0].width == 300 和 $canvas[0].height == 150

这是怎么回事？

更新:有趣/奇怪 - 如果我这样做:

ctx.drawImage($video[0], 0, 0, 320, 240);

我仍然得到一张 300x150 的图像，但它被裁剪了。虽然从源头上看确实是正确的纵横比

更新 2: 更奇怪的是，如果我这样做:

ctx.drawImage($video[0], 0, 0, 640, 480);

我最终还是得到了一张 300x150 的图片，但它位于图片的左上四分之一处 :'(

Answer 1

用 css 调整 Canvas 的大小似乎是不够的。你必须做:

canvas.width = 320;
canvas.height = 240;

然后

ctx.drawImage($video[0], 0, 0, 320, 240);

工作正常