4

getUserMedia を使用して、ユーザーの Web カメラから写真を撮ろうとしています。

カメラからの画像は 640x480 です (ユーザーの Web カメラに応じて、おそらく任意のサイズになる可能性があります)。

css で 320x240 のサイズのビデオ タグを取得しました。次のように Web カメラの画像をレンダリングしています。

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分の1です:'(

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 に答える