[英]How to Capture Image using Web Camera in JSP only (Without using Servlet) and save it into MS SQL Server
我想使用网络摄像头捕获图像并将其存储到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)。
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中的图像文件中所述
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.