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

Question

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

拍照->裁剪-> html表格->打印

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> 

由于依赖关系，该代码段在这里可能无法正常工作。 您将需要下载整个脚本包，并在您的项目中使用它。