截图画布getUserMedia Chrome

Question

我想在Chrome测试版中对wecam视频进行一次扫描.代码只生成视频的一小部分截图,出了什么问题？

这里的代码:

http://jsfiddle.net/N9XKh/

Answer 1

您尚未指定canvas元素的尺寸,因此它以默认尺寸(300x150)创建,该尺寸小于video元素的尺寸.因此,当您绘制video到canvas正在裁剪的快照时.

我会更新snapshot方法来设置canvas宽度和高度以匹配video元素的宽度和高度,如下所示:

  // create snapschot          
  function snapshot() {

         // set the canvas to the dimensions of the video
         canvas.width = video.clientWidth;
         canvas.height = video.clientHeight;

         ctx.drawImage(video, 0, 0);

         document.getElementById("huhu").src = canvas.toDataURL('image/webp');

  }

这里更新了小提琴.