如何从网络摄像头拍照到html页面进行打印？

Question

我想从网络摄像头拍照，然后裁剪图像到html页面。 我从下面的链接有一个想法： https://kdzwinel.github.io/JS-OCR-demo/ 裁剪图像后，我想把它放到html页面并打印出来。 请参阅下面的流程，请帮助如何将裁剪的图像放到html页面。

拍照 - ＆gt;裁剪 - ＆gt; html表格 - ＆gt;打印

Answer 1

您可以使用scriptcam.js拍照。然后你可以在base64中保存图片或将它们转换为JPG / PNG，然后使用任何服务器端语言保存在服务器上。

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

见下面的例子

// 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>

由于依赖性，该片段可能无法在此处使用。您需要下载整个脚本包并在项目中使用它。