javascript - screenshot canvas getUserMedia Chrome - Stack Overflow

admin管理员组

文章数量:1410724

I want to make a screnshot of the wecam video in Chrome beta. The code only produces a screenshot of a small part of the video, what went wrong?

here the code:

/

I want to make a screnshot of the wecam video in Chrome beta. The code only produces a screenshot of a small part of the video, what went wrong?

here the code:

http://jsfiddle/N9XKh/

• javascript
• html
• google-chrome
• canvas

Share Improve this question Follow edited Aug 1, 2012 at 17:52 net.uk.sweet 12.4k33 gold badges2626 silver badges4242 bronze badges asked Aug 1, 2012 at 15:09 user1477955user1477955 1,67088 gold badges2424 silver badges3737 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You haven't specified the dimensions of your canvas element so it is being created at the default size (300x150) which is smaller than the dimensions of the video element. As a result, when you draw the video to the canvas the snapshot is being cropped.

I would update the snapshot method to set the canvas width and height to match those of the video element like so:

  // 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');

  }

Updated fiddle here.

本文标签： javascriptscreenshot canvas getUserMedia ChromeStack Overflow