2016-08-03 1 views
0

Webカメラを使用してイメージをキャプチャし、MS SQL Serverデータベースに保存します。JSPでのみWebカメラを使用してイメージをキャプチャする方法(サーブレットを使用せずに)MS SQL Serverに保存する方法

ウェブカメラを使用してイメージをキャプチャできますが、今はイメージを次のページに渡そうとしていますが、次のjspでイメージを処理できませんでした。

コード画像

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Web camera - Testing</title> 

    <script> 

     // Put event listeners into place 
     window.addEventListener("DOMContentLoaded", function() { 
      // Grab elements, create settings, etc. 
      var canvas = document.getElementById("canvas"), 
        context = canvas.getContext("2d"), 
        video = document.getElementById("video"), 
        videoObj = {"video": true}, 
      errBack = function (error) { 
       console.log("Video capture error: ", error.code); 
      }; 

      // Put video listeners into place 
      if (navigator.getUserMedia) { // Standard 
       navigator.getUserMedia(videoObj, function (stream) { 
        video.src = stream; 
        video.play(); 
       }, errBack); 
      } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed 
       navigator.webkitGetUserMedia(videoObj, function (stream) { 
        video.src = window.webkitURL.createObjectURL(stream); 
        video.play(); 
       }, errBack); 
      } else if (navigator.mozGetUserMedia) { // WebKit-prefixed 
       navigator.mozGetUserMedia(videoObj, function (stream) { 
        video.src = window.URL.createObjectURL(stream); 
        video.play(); 
       }, errBack); 
      } 

      // Trigger photo take 
      document.getElementById("snap").addEventListener("click", function() { 
       context.drawImage(video, 0, 0, 213, 160); 
       document.getElementById('canvasImg').src = canvas.toDataURL("image/png"); 

//     document.getElementById('video').style.display = "none"; // hide the live image video portin after click on take picture 
      }); 



     }, false); 

    </script> 



</head> 
<body> 
    <h1>Capture Image using Camera!</h1> 

    <!-- 
    Ideally these elements aren't created until it's confirmed that the 
    client supports video/camera, but for the sake of illustrating the 
    elements involved, they are created with markup (not JavaScript) 
    --> 
    <video id="video" width="213" height="160" autoplay></video> 
    <button id="snap">Capture Photo</button> 

    <form action="savetesting.jsp" method="post"> 
     <canvas id="canvas" width="213" height="160" name="ImageFile1" style="display: none;"></canvas> 

     <img id="canvasImg" name="ImageFile"><img> 
     <input type="reset" value="Reset"/> 
     <input type="submit" value="Submit"/> 

    </form> 

</body> 
</html> 

をキャプチャするが、今、私は

request.getParameter("ImageFile"); 

を使用して撮影した画像を取得しようとしていますが、成功することができませんでした。

この問題で私を助けてください。次のページでイメージを取得するには、MS SQL Serverデータベースにイメージを保存しようとしますが、サーブレットを使用せずにJSPを使用します。

+0

名=「をimagefile1」で説明したようにjavax.xml.bind.DatatypeConverterを使用してそれらを処理するが、あなたは取得request.getParameter( "ImageFile");両方が統一されている必要があります! –

+0

ImageFileとImageFile1の両方を使用してイメージソースを取得しようとしましたが、イメージソースを取得できませんでした –

+0

上記のコードをファイルで使用すると、空白のページが開きます。ウェブカメラではありませんか? –

答えて

1

canvasimgも、formタグ内に配置してもフォーム入力フィールドではありません。 snapボタンのclickイベントハンドラにフォームに

<input type="hidden" name="ImageData" id="ImageData" /> 

を追加し、

document.getElementById('ImageData').value = canvas.toDataURL("image/png"); 

次に、JSPで、

String imageData = request.getParameter("ImageData"); 

を使用して(data URI形式)の画像データを取得し、フォームにConvert DataURL image to image file in java

+0

はい上記のコードは、隠しフィールドを使用して次のページに画像ソースを取得するために機能します。 ありがとうございました。 これで、Base64データをバイト配列に変換して、イメージをデータベースに保存しました。 –

+0

@KaranChopraあなたは私の答えを受け入れてもらえますか? –

+0

今、私はWebサーバー上のイメージを保存して、イメージをMS SQL Serverデータベースにバイトとして保存します。 –

関連する問題