将 HTML5 视频渲染到 Canvas 会挤压图像答案

【问题标题】：rendering HTML5 Video to Canvas is squashing the image将 HTML5 视频渲染到 Canvas 会挤压图像
【发布时间】：2013-02-11 21:49:02
【问题描述】：

我正在尝试使用 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 的图像，但它是图像的左上角 :'(

【问题讨论】：

标签： html canvas getusermedia

【解决方案1】：

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

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

然后

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

工作正常

【讨论】：

是的。 canvas 的内在宽度为 300x150。使用 CSS 更改大小不会更改固有分辨率，就像使用 CSS 更改 PNG 或 JPG 的大小不会更改图像的固有分辨率一样。 stackoverflow.com/q/5034529/8655
最后 2 个参数为我做了

【解决方案2】：

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

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

【讨论】：