如何仅在JSP中使用Web Camera捕获图像（不使用Servlet）并将其保存到MS SQL Server

Question

I want to capture the image using web camera and store it into MS SQL Server database. 我想使用网络摄像头捕获图像并将其存储到MS SQL Server数据库中。

I am able to capture the image using web camera but right now i am trying to pass the image to next page but could not get the image on next jsp to process the image. 我可以使用网络摄像头捕获图像，但是现在我正尝试将图像传递到下一页，但是无法在下一个jsp上获取图像来处理图像。

Code to capture image 捕获图像的代码

<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>

but now i am trying to get the captured image using 但是现在我正在尝试使用捕获的图像

request.getParameter("ImageFile");

but could not succeed. 但无法成功。

Please help me out with this issue, How to get the image on next page then i will try to save the image in MS SQL Server Database but only using JSP (without using Servlet). 请帮助我解决此问题，如何在下一页获取图像，然后我将尝试将图像保存在MS SQL Server数据库中，但只能使用JSP（不使用Servlet）。

Answer 1

Neither canvas nor img are form input fields, even when placed inside form tag. canvas和img都不是表单输入字段，即使放置在form标签中也是如此。 Add 加

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

to your form, and 到您的表格，以及

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

to the click event handler of the snap button. snap按钮的click事件处理程序。

Then, in JSP, get the image data (in the data URI format) using 然后，在JSP中，使用以下命令获取图像数据（数据URI格式）

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

and process them using javax.xml.bind.DatatypeConverter as described in Convert DataURL image to image file in java 并使用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