在Asp.Net MVC中通过网络摄像头捕获图像 [英] Capture image by Webcam in Asp.Net MVC
问题描述
我想从网络摄像头捕获图像并保存在服务器上或通过ajax发送.以及两者中哪个是更好的选择，为什么?欢迎任何可用信息.预先感谢
I want to capture an image from webcam and save on server or send through ajax. And which would be better option from both and why ? Any available information is welcome. Thanks in advance
推荐答案
您可以按照以下步骤轻松地做到这一点
You can easily do this by following these steps
第1步
从此处下载Javascript网络摄像头项目
Download Javascript Webcam project from Here
第2步
提取解决方案，并使用以下现有的asp.net mvc应用程序添加完整的解决方案
Extract solution and add this complete solution with your existing asp.net mvc application using
第3步
打开 demo 文件夹中的 basic.html 并替换为此
Open basic.html from demo folder replace with this
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebcamJS Test Page</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div id="results">Your captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script type="text/javascript" src="../webcam.min.js"></script>
<!-- Configure a few settings and attach camera -->
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
</script>
<!-- A button for taking snaps -->
<form>
<input type=button id="takeshot" value="Take Snapshot" onClick="take_snapshot()">
</form>
<!-- Code to handle taking the snapshot and displaying it locally -->
<script language="JavaScript">
window.onload = function () {
setInterval(function () { take_snapshot() }, 5000);
}
function take_snapshot() {
// take snapshot and get image data
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h2>Here is your image:</h2>' +
'<img id="base64image" src="' + data_uri + '"/>';
});
var file = document.getElementById("base64image").src;
var formdata = new FormData();
formdata.append("base64image", file);
$.ajax({
url: "http://localhost:26792/home/SaveImage",
type: "POST",
data: formdata,
processData: false,
contentType: false
});
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1 /jquery.min.js"></script>
</body>
</html>
第4步
替换为Home控制器
public class HomeController : Controller
{
public ActionResult Index()
{
string[] allimage = System.IO.Directory.GetFiles(Server.MapPath("~/Content/Images/"));
if (allimage.Length>0)
{
List<string> base64text = new List<string>();
foreach (var item in allimage)
{
base64text.Add(System.IO.File.ReadAllText(item.ToString()));
}
ViewBag.Images = base64text;
}
return View();
}
[HttpPost]
public void SaveImage(string base64image)
{
System.IO.File.WriteAllText(Server.MapPath("~/Content/Images/" + DateTime.Now.ToString("yyyyMMdd_hhmmss") + ".txt"), base64image);
}
}
最后将Index.html替换为
Finally replace Index.html with
<h2>Capture images</h2>
@foreach (var item in ViewBag.Images)
{
<img src="@item" />
}
注意
此代码 将每5秒从网络摄像头捕获一次照片，并将其保存为服务器，因为文本文件包含 base64 进行编码，然后使用索引操作读取它们，并显示为img src.
This code will capture photo from webcam after every 5 second and save it to server as text file consist of base64 encode then Index action read them and and display as img src.
这篇关于在Asp.Net MVC中通过网络摄像头捕获图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
