ウェブカメラからhtmlページに写真をプリントアウトするにはどうしたらいいですか？

Question

ウェブカメラから写真を撮り、画像をHTMLページに切り出したいと思います。 私は下のリンクからアイディアを持っています： https://kdzwinel.github.io/JS-OCR-demo/ 画像を切り抜いた後、htmlページに貼り付けて印刷したいと思います。 フローを下に見て、切り抜かれたイメージをhtmlページに置く方法を助けてください。

は、あなたが写真を撮るためscriptcam.jsを使用することができますフォト> Crop-> HTMLフォーム - >印刷

Answer 1

してください。その後、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>

例の下を参照してください。スクリプトパッケージ全体をダウンロードしてプロジェクトで使用する必要があります。