Question

我编写了这段代码，使我遇到了一个特殊的问题：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #video {width: auto;}
        #viewfinder {position: absolute; border: solid rgba(255,255,255,0.5) 5px;}
    </style>
</head>
<body>
 
    <video id="video" autoplay></video>
    <div id="viewfinder"></div>
    <button id="snap">Scan</button>
 
<script type="text/javascript">
 
var video = document.getElementById('video');  
var canvas = document.getElementById('canvas');
 
// Get access to the camera
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.src = window.URL.createObjectURL(stream);
        video.play();
 
        // Wait until the video is loaded
        video.addEventListener( "loadedmetadata", function (e) {
 
            var viewfinder = document.getElementById('viewfinder');
            var video_height = video.offsetHeight;
            var video_width = video.offsetWidth;
 
            vis_dim = Math.min(video_height, video_width);
 
            // Find the width of the viewfinder's borders
            border_wdt = window.getComputedStyle(viewfinder).getPropertyValue("border-left-width");
          
            // The borders are assumed to be smaller than 10px
            border_wdt = parseInt(border_wdt[0]);
 
            // Create the viewfinder
            viewfinder.style.height = vis_dim - vis_dim / 10 + "px";
            viewfinder.style.width = vis_dim - vis_dim / 10 + "px";
 
            // Add some variables about the viewfinder
            var vf_height = viewfinder.offsetHeight;
            var vf_width = viewfinder.offsetWidth;
 
            viewfinder.style.top = video.offsetTop + ((video_height - vf_height) / 2) + "px";
            viewfinder.style.left = video.offsetLeft + ((video_width - vf_width) / 2) + "px";
 
            // Create the canvas
            var canvas = document.createElement('canvas');
            canvas.id = "canvas";
            canvas.width = vf_height - border_wdt * 2;
            canvas.height = vf_height - border_wdt * 2;
            canvas.style.border = "1px solid";
             
            // Insert the canvas in the body
            var body = document.getElementsByTagName("body")[0];
            body.appendChild(canvas);
 
            context = canvas.getContext('2d');
 
            // When the snap is click :
            document.getElementById("snap").addEventListener("click", function() {
 
                // Copy viewfinder's view on the canvas
                context.drawImage(
                                    // element to copy
                                    video,
 
                                    // Begin off the zone to copy: left
                                    viewfinder.offsetLeft + border_wdt - video.offsetLeft,
 
                                    // Begin off the zone to copy: top
                                    viewfinder.offsetTop + border_wdt - video.offsetTop,
 
                                    // Width of the zone to copy
                                    vf_width - border_wdt * 2,
 
                                    // Height of the zone to copy
                                    vf_width - border_wdt * 2,
 
                                    // Left point to begin the copy in the canvas
                                    0,
 
                                    // Top point to begin the copy in the canvas
                                    0,
 
                                    // Copy width
                                    vf_width - border_wdt * 2,
 
                                    // Copy height
                                    vf_width - border_wdt * 2
                                );
            });
        }, false );
    });
}
 
</script>
 
</body>
</html>

此代码使我可以在我将要定义的小区域（我将其命名为取景器）上制作摄像机视频的屏幕截图。

在我决定在CSS中更改视频的宽度或高度之前，该方法效果很好。与取景器无关的区域是画布上的油漆。

有没有人必须解决这种问题？如果我的解释不清楚，请花2秒时间测试代码：）

提前谢谢

画布：绘制视频的图像

0 个答案: