4

我正在尝试使用 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);

这会将图像绘制到画布上，但看起来有点模糊：/

那么，如果我这样做：

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

这会将画布渲染为图像元素，但图像被压扁，它的 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 的图像，但它是图像的左上角 :'(

4

2 回答 2

11

似乎用 css 调整画布大小是不够的。你所要做的：

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

然后

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

工作正常

于 2013-02-11T22:01:43.140 回答
1

画布的高度和宽度可以与视频的高度和宽度一起设置。

$canvas[0].height = $video[0].videoHeight;
$canvas[0].width = $video[0].videoWidth;
于 2014-08-11T15:08:42.700 回答