从网络摄像头捕获的网页中显示图片

我使用jquery-webcam-plugin（不熟悉jQuery）。我想在摄像头拍摄照片，并希望立即在同一个网页上显示该图片，可能会用摄像头捕获的图像替换某些默认图像，而无需任何服务器通信，这是可能的吗？如果可能的话请建议。从网络摄像头捕获的网页中显示图片

如果从网络摄像头捕获的图像保存在本地，我可以使用该图像路径吗？

我使用以下代码（与相关API /插件一起）：

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

任何建议表示赞赏。如果我做错了，请纠正我。

来源

2012-08-28 user1630743

源代码解释了它是如何工作的。该照片不存储在文件系统中，而是存储为base64编码的JavaScript变量。

来源

2012-08-28 16:30:54 dotancohen

但是我甚至没有得到确切的base64编码。如果我解码base64编码，然后它会生成一个图像与黑色和白色boxes.Kindly告诉我解决方案如何生成base64编码的图像。 –

听起来你的摄像头用黑白盒子返回了图像！如果base64被错误地解码，那么您将收到的内容不会被翻译成图像。 – dotancohen

其实我得到了base64这是item_image的价值，然后我解码这base64使用一个java到image.The我得到的图像包含白色和黑色框。 –

从网络摄像头捕获的网页中显示图片

回答

相关问题