我试图做一个演示,用户将能够从通过他的浏览器启用的网络摄像头捕获图像,并且该图像将通过将其传递到使用AJAX调用的PHP服务保存在后端。
我可以捕获为画布,但不能将其转换为图像数据。 我得到canvas is undefined error
安装非常简单。
HTML
<video id="videoElement" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" style="display:none" ></canvas>
JAVASCRIPT
// Grab elements, create settings, etc.
var video = document.getElementById('videoElement');
// Get access to the camera!
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
// Not adding `{ audio: true }` since we only want video now
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
});
}
// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('videoElement');
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
var cann= context.drawImage(video, 0, 0, 640, 480); //draw canvas
//then convert canvas to image so i can obtain dataurl
//and pass it to another function using AJAX
var img= convertCanvasToImage(cann);
console.log(img);
});
// Converts canvas to an image
function convertCanvasToImage(canvas)
{
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
我是很新,这个领域。我还有一个问题。这会在最新的浏览器上运行吗? 任何人都可以帮我找出我犯的错误吗?
参考: https://davidwalsh.name/browser-camera
https://davidwalsh.name/convert-canvas-image
它在同一个文件中。 –
然后第一个解决方案最适合你:)。希望它给你带来了好处 –
有没有办法提高拍摄镜头的质量?现在质量很差。 @Manoj Lodhi –