Canvas: capturing stream with drawImage only captures upper left corner of stream image

Question

I'm having a weird issue when trying to make a webpage on which I want to capture a picture from the visitors webcam. I have two divs with a button in between which draws the content of the webcam stream in the first div at the time the button is clicked on a canvas in the second div.

The problem is that the image of my stream seems to get clipped: only the upper left corner seems to be captured. I've tried playing with the dimensions of the canvas and the div containing it to no avail. The problem also persists when I save the canvas as an image.

Here is a test page I made that has this issue:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Webcam test</title>

        <style>
            #picturecontaienr {
                width: 800px;
                height: 800px;
            }
            #takenpicture {
                width: 750px;
                height: 750px;
                margin: 0%;
                padding: 0%;
            }
        </style>
    </head>
    <body>
        <h1>Webcam test!</h1>
        <div id="webcamcontainer">
            <video width="500" height="500" autoplay="true" id="webcamstream">
            </video>
        </div>
        <button id="takepicture">Take picture!</button>
        <div id="picturecontainer">
            <canvas id="takenpicture">
            </canvas>
        <script>
            var video = document.getElementById ( "webcamstream" );

            navigator.getUserMedia = ( navigator.getUserMedia ||
                                       navigator.webkitGetUserMedia ||
                                       navigator.mozGetUserMedia ||
                                       navigator.msGetUserMedia ||
                                       navigator.oGetUserMedia );
            if ( navigator.getUserMedia ) {
                navigator.getUserMedia ( {video:true}, function ( stream ) {
                    video.src = window.URL.createObjectURL ( stream );
                }, function ( ) {
                    document.getElementById ( "videocontainer" ).innerHTML += "<p>You did not give permission to take a picture of your QR code!</p>";
                } );
            }

            document.getElementById ( "takepicture" ).addEventListener ( "click", function ( ) {
                var drawingContext = document.getElementById ( "takenpicture" ).getContext ( "2d" );
              
                drawingContext.drawImage ( video, 0, 0, 500, 500 );
  
                //var imageSource = document.getElementById ( "takenpicture" ).toDataURL ( "image/png" );
                //alert ( imageSource );
            } );
            
        </script>
     </body>
</html>

I would be very grateful if someone could point me in the right direction.

Thanks in advance, Joshua

I fixed the problem. The problem is that I tried to define the canvas width and height in CSS, but this doesn't seem to work ( the canvas stays the default size, no matter what size I give it in CSS ). I suggest setting the width and height as attributes of the canvas tags. Also, please make sure, unlike I did, that the canvas width and height match the fourth and fifth parameters of the drawImage call. — Joshua Schroijen, Dec 14 '17 at 12:25

KuroKyo · Answer 1 · 2017-12-13T23:24:02.867

Firstly, a typo: #picturecontaienr in your css should match <div id="picturecontainer"> in your html.

EDIT: Here is a Plunker showing what i mean, though it looks like the dimensions should actually be smaller. see if fiddling around with this helps. https://embed.plnkr.co/efHNA5SgLenSc0dyEgDE/ (CREDIT TO W3schools.com for the source code and image i used in the plunker!)

I'm not experienced with Canvas and don't have rep to comment, but this is potentially a cause: drawingContext.drawImage ( video, 0, 0, 500, 500 ); Sets the start point of the image to the top left corner (0,0) and then the end point to (500, 500), yet your canvas is:

#picturecontaienr {width: 800px; height: 800px;}
#takenpicture {width: 750px; height: 750px; margin: 0%; padding: 0%;}

Therefore the image will theoretically terminate at 500, 500 in the middle of the canvas. My guess is the webcam is trying to draw at an identical resolution to the taken picture, which could be something larger depending on the cam's default picture resolution. Try setting drawingContext.drawImage ( video, 0, 0, 1000, 1000); to see if it makes a difference.

If you don't want to make your div/canvas bigger you can apply overflow: auto; to the css inside either and keep your box the same size but at least allow you to see a scrollbar if the image is too large.

Let me know if this helped!

Canvas: capturing stream with drawImage only captures upper left corner of stream image

1 Answers1