在从网络摄像头捕获的网页中显示图片 [英] Display pic in web page captured from webcam
问题描述
我正在使用 jquery-webcam-plugin (不熟悉jQuery).我想在网络摄像头中拍照并想立即在同一网页中显示该图像，可能用一些从网络摄像头捕获的图像替换一些默认图像，而无需任何服务器通信，这可能吗?如果可能的话，请提出建议.
I'm using jquery-webcam-plugin (not familiar with jQuery). I want to take picture in webcam and want to display that picture in the same web page instantly, possibly replacing some default image by image captured from webcam, without any server communication, is that possible? if possible please suggest.
如果从网络摄像头捕获的图像保存在本地，我可以使用该图像路径吗?
If the image captured from webcam is saved locally, can I use that image path?
我正在使用以下代码(以及相关的API/插件):
I'm using the following code(along with the related API/plugin):
<html>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.webcam.js" type="text/javascript"></script>
<script type="text/javascript">
// this is the interface to webcam, registers webcam
function showWebcam(){
$("#camera").webcam({
width: 320,
height: 240,
mode: "callback",
swffile: "jscam_canvas_only.swf",
quality: 85,
onCapture: function () {
},
onTick: function () {},
onSave: function () {},
onLoad: function () {},
debug: function(type, string) {
$('#wcStatus').append(type + ": " + string + '<br /><br />');
}
});
}
// **** THIS IS THE FUNCTION I NEED HELP I THINK ****
//this function captures image from webcam
function capture_image(){
var p = webcam.capture();
//webcam.save();
alert("capture complete "+p); //getting true here
void(0);
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
var img = canvas.toDataURL("image/png");
var item_image = img.replace(/^data:image\/(png|jpg);base64,/, "") ;
//alert(item_image);
//LINE BELOW DOESN'T WORK, I want to replace default image by image of a <img> tag
//captured by WC
document.getElementById('myImg').src=img;//<img tag>
document.getElementById('myImg').src=item_image;
// NOW WHAT TO DO HERE PLEASE SUGGEST
}
</script>
</head>
//FOLLOWING IS THE HTML SNIPPET
<body>
<div id="camera"></div>
<div id="camList"></div>
<div id="wcStatus"></div>
<button onclick="showWebcam();">Use Webcam Instead</button>
<button onclick="javascript:capture_image();">Take a picture!</button>
<div id="capture_images"><input id="capture_image" type="hidden" value="" name="capture[image]"></div>
// some default image, which will be replaced by image captured by webcam
<img id="myImg" src="face.png" border=1>
<p><canvas id="canvas" width="320" height="240"></canvas></p>
</body>
</html>
任何建议都值得赞赏.如果我做错了，请纠正我.
Any suggestion is appreciated. please rectify me if I'm doing wrong.
推荐答案
源代码说明了它的工作方式.照片不存储在文件系统中，而是存储为base64编码的Javascript变量.
The source code explains how it works. The photo is not stored on the filesystem, but rather is stored as a base64-encoded Javascript variable.
这篇关于在从网络摄像头捕获的网页中显示图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
