将HTML5视频渲染到画布上会压缩图像。

Question

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

摄像头拍摄的图像为640x480（取决于用户的网络摄像头，可能是任何大小）。

我有一个视频标签，使用CSS调整大小为320x240，并将网络摄像头图像渲染到其中：

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的图像，但它只是图像的左上角四分之一。

- Andrew Bullock

Answer 1

似乎仅使用CSS调整画布大小是不够的。您需要这样做：

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

然后

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

正常工作

- Andrew Bullock

---

是的。canvas元素的内在宽度为300x150。使用CSS更改大小不会改变内在分辨率，就像使用CSS更改PNG或JPG的大小不会改变图像的内在分辨率一样。https://dev59.com/BG445IYBdhLWcg3wGmk6 - robertc

最后两个参数对我有用。 - Nick Chan Abdullah

Answer 2

< p > 画布的高度和宽度可以通过视频的高度和宽度进行设置。< /p >

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

- ruffrey