從網絡攝像頭捕獲的網頁中顯示圖片

我使用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我得到的圖像包含白色和黑色框。 –

從網絡攝像頭捕獲的網頁中顯示圖片

回答

相關問題