Отображение картинки на веб-странице, полученной с веб-камеры

Я использую 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>

Любое предложение приветствуется. пожалуйста, исправьте меня, если я делаю неправильно.

Источник

1 ответ

Исходный код объясняет, как это работает. Фотография не хранится в файловой системе, а хранится как переменная Javascript в кодировке base64.

Источник
Другие вопросы по тегам