How can I take picture from webcam to html page to print out?

Question

I would like to take a picture from webcam then crop image to html page. I have an idea from below link: https://kdzwinel.github.io/JS-OCR-demo/ After cropping image, I would like to put it to html page and print out. Please see below the flow and please help how to put cropped image to html page.

Take photo->Crop->html form->print

This may be helpful, http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots — parlad, May 05 '17 at 04:43
What time frame do you need it done by mate? I can have it back to you tomorrow for $900. /s — Mathemats, May 05 '17 at 04:45

score 0 · Accepted Answer · answered May 05 '17 at 04:53

You can use scriptcam.js for taking pictures. Then you can save pictures in base64 or convert them to JPG/PNG and save then on server using any server side language.

Scriptcam: https://plugins.jquery.com/ScriptCam/ Github: https://github.com/teleline/ScriptCam

See below example

// Get list of available camera 

function onWebcamReady(cameraNames, camera, microphoneNames, microphone,
            volume) {
        $.each(cameraNames, function(index, text) {
            $('#cameraNames').append(
                    $('<option></option>').val(index).html(text))
        });
        $('#cameraNames').val(camera);
}

// CALL Scriptcam on document ready

$(document).ready(function() {
        $("#webcam").scriptcam({
            showMicrophoneErrors : false,
            onError : onError,
            cornerRadius : 20,
            disableHardwareAcceleration : 1,
            cornerColor : 'e3e5e2',
            onWebcamReady : onWebcamReady,
            uploadImage : 'upload.gif',
            onPictureAsBase64 : base64_tofield_and_image
        });
});

// ACTION, If camera is changed (useful in case you have more than 1 web cam attached to PC)

function changeCamera() {
        $.scriptcam.changeCamera($('#cameraNames').val());
}

// Save captures Image

function imageBase64() {
        $('#formfield').val($.scriptcam.getFrameAsBase64());  // Get base64 text in text area
        $('#MyImg').src($.scriptcam.getFrameAsBase64());  // Show in image
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://raw.githubusercontent.com/teleline/ScriptCam/master/scriptcam.js"></script>


<select id="cameraNames" size="1" onchange="changeCamera()" style="width: 245px; font-size: 10px; height: 25px;"></select>
 
<button class="btn btn-small" id="btn1" onclick="base64_tofield()">Image Base64</button>
 
 <img src="" id="MyImg" />
 
<textarea id="formfield" style="width: 190px; height: 70px;"></textarea>

The snippet may not work here due to dependecies. You will need to download entire script package and use it on your project.

How can I take picture from webcam to html page to print out?

1 Answers1