javascript - 屏幕截图画布 getUserMedia Chrome

Question

我想在 Chrome 测试版中制作 wecam 视频的截图。代码只生成了一小部分视频的截图，出了什么问题？

这里的代码：

http://jsfiddle.net/N9XKh/

Answer 1

您尚未指定canvas元素的尺寸，因此它是以小于video元素尺寸的默认尺寸 (300x150) 创建的。结果，当您绘制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');

  }

在这里更新了小提琴。