0

我正在使用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>

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

4

1 回答 1

0

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

于 2012-08-28T16:30:54.077 回答