2017-05-05 33 views
0

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

以光电>作物 - > HTML形式 - >打印enter image description here

+0

这可能是有帮助的,http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots –

+0

什么时间框架你需要它做伴侣?我明天可以以900美元的价格回收给你。 /秒 – Mathemats

回答

0

可以使用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>

的片段可能不在这里工作,由于依赖条件。您需要下载整个脚本包并将其用于您的项目。

相关问题