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

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

然后，如果我这样做：

$('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的图像，但是图像的左上角是：'（

Answer 1

看起来用css调整画布大小是不够的。你必须这样做：

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

然后

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

正确地工作

Answer 2

可以使用视频高度和宽度设置画布高度和宽度。

$canvas[0].height = $video[0].videoHeight;
$canvas[0].width = $video[0].videoWidth;

将HTML5视频呈现为Canvas正在压缩图像

2 个答案: