如何僅在JSP中使用Web Camera捕獲圖像（不使用Servlet）並將其保存到MS SQL Server

Question

我想使用網絡攝像頭捕獲圖像並將其存儲到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（不使用Servlet）。

Answer 1

canvas和img都不是表單輸入字段，即使放置在form標簽中也是如此。 加

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

到您的表格，以及

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

snap按鈕的click事件處理程序。

然后，在JSP中，使用以下命令獲取圖像數據（數據URI格式）

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

並使用javax.xml.bind.DatatypeConverter處理它們，如將DataURL圖像轉換為Java中的圖像文件中所述

如何僅在JSP中使用Web Camera捕獲圖像（不使用Servlet）並將其保存到MS SQL Server

問題描述

1 個解決方案

解決方案1
1 已采納 2016-08-03 07:31:22

如何僅在JSP中使用Web Camera捕獲圖像（不使用Servlet）並將其保存到MS SQL Server

問題描述

1 個解決方案

解決方案1 1 已采納 2016-08-03 07:31:22

解決方案1
1 已采納 2016-08-03 07:31:22