Canvas：使用drawImage捕获流仅捕获流图像的左上角[重复]
Posted
技术标签:
【中文标题】Canvas：使用drawImage捕获流仅捕获流图像的左上角[重复]【英文标题】：Canvas: capturing stream with drawImage only captures upper left corner of stream image [duplicate] 【发布时间】：2018-05-27 22:29:32 【问题描述】：在尝试创建一个网页时，我遇到了一个奇怪的问题，我想在该网页上从访问者的网络摄像头中捕获图片。我有两个 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 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>如果有人能指出我正确的方向，我将不胜感激。
提前致谢， 约书亚
【问题讨论】：
我解决了这个问题。问题是我试图在 CSS 中定义画布的宽度和高度，但这似乎不起作用（画布保持默认大小，无论我在 CSS 中给出什么大小）。我建议将宽度和高度设置为画布标签的属性。另外，请确保画布的宽度和高度与 drawImage 调用的第四个和第五个参数相匹配。 【参考方案1】：首先，一个错字：您的 css 中的 #picturecontaienr 应该与您的 html 中的 <div id="picturecontainer"> 匹配。
编辑：这是一个 Plunker 显示我的意思，虽然看起来尺寸实际上应该更小。看看摆弄这个是否有帮助。 https://embed.plnkr.co/efHNA5SgLenSc0dyEgDE/ （感谢 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捕获流仅捕获流图像的左上角[重复]的主要内容，如果未能解决你的问题，请参考以下文章
Tkinter Canvas Postscript 未捕获屏幕框架外的 Window 元素