Question

我在尝试制作一个我想要从访客网络摄像头捕获图片的网页时遇到了一个奇怪的问题。我有两个div，其间有一个按钮，在第二个div中的画布上单击按钮时，在第一个div中绘制网络摄像头流的内容。

问题是我的视频图像似乎被剪切：只有左上角似乎被捕获。我尝试过使用画布的尺寸和包含它的div无济于事。当我将画布保存为图像时，问题也会持续存在。

这是我制作的测试页面有这个问题：

<!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>

如果有人能指出我正确的方向，我将非常感激。

提前致谢，约书亚

Answer 1

首先，你的CSS中的拼写错误：#picturecontaienr应与你的html中的<div id="picturecontainer">匹配。

编辑：这是一个显示我的意思的Plunker，虽然看起来尺寸实际上应该更小。看看是否摆弄这有帮助。 https://embed.plnkr.co/efHNA5SgLenSc0dyEgDE/ （CREDIT到W3schools.com获取我在plunker中使用的源代码和图片！）

我对Canvas没有经验，也没有回复评论，但这可能是一个原因：drawingContext.drawImage ( video, 0, 0, 500, 500 );将图像的起点设置到左上角（0,0）然后结束点（500,500），但你的画布是：

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

因此，理论上图像将在画布中间的 500,500 处终止。我的猜测是网络摄像头试图以相同的分辨率绘制拍摄的图像，根据凸轮的默认图像分辨率，这可能会更大。尝试设置drawingContext.drawImage ( video, 0, 0, 1000, 1000);以查看它是否有所作为。

如果你不想让你的div / canvas更大，你可以将overflow: auto;应用到css里面，并保持你的盒子大小相同但至少允许你看到一个滚动条，如果图像也是大。

请告诉我这是否有帮助！

Canvas：使用drawImage捕获流只捕获流图像的左上角

1 个答案: