0

jquery-webcam-pluginを使用しています(jQuery に慣れていません)。ウェブカメラで写真を撮りたいのですが、その写真を同じウェブページに即座に表示したいのですが、サーバーとの通信なしで、デフォルトの画像をウェブカメラからキャプチャした画像に置き換えることは可能ですか? 可能であれば提案してください。

Web カメラからキャプチャされた画像がローカルに保存されている場合、その画像パスを使用できますか?

次のコードを使用しています(関連する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 に答える