asp.net-mvc - MVC 将捕获的网络摄像头图像保存到数据库
问题描述
再会!
我有一个代码,用户单击一个按钮,模式会弹出一个 webcam.js。用户将从网络摄像头拍摄快照照片,然后将其保存到数据库中。问题是我不知道如何将它保存到数据库。从我在大多数论坛中看到的情况来看,他们将图像保存Image path
到数据库中,但我想要的是将图像本身保存到数据库中。
模型
public partial class tbl_Picture
{
public string picture_id { get; set; }
public string operator_id { get; set; }
public byte[] picture { get; set; }
}
控制器
[HttpPost]
public ActionResult Franchise()
{
return View();
}
看法
<td>
<a class="btn btn-warning open-camera" data-toggle="modal" data-id="@item.franchise_id" href="#myModal3">
Open Camera<span class="glyphicon glyphicon-plus-sign"></span>
</a>
</td>
模态
@using (Html.BeginForm("Franchise", "Application", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="modal-body">
<div class="row">
<input type="text" name="franid" id="franid" value="" class="hidden" />
<div id="my_camera" class="col-lg-6"></div>
<div id="results" class="col-lg-6">Your captured image will appear here...</div>
</div>
<form>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
</form>
</div>
<div class="modal-footer">
<center>
<button class="btn btn-success" type="submit">Submit</button>
<button class="btn" type="button" data-dismiss="modal">Close</button>
</center>
</div>
}
</div>
脚本
<script language="JavaScript">
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#my_camera' );
</script>
<script language="JavaScript">
function take_snapshot() {
Webcam.snap( function(data_uri) {
document.getElementById('results').innerHTML =
'<img id="base64image" src="' + data_uri + '"/>';
} );
}
</script>
我尝试做这个论坛中的内容,但我不明白它将如何保存到我的数据库中。因此,我尝试恢复到此代码并在线搜索更多想法。
提前致谢!
解决方案
您可以为此使用 ajax。希望对你有所帮助,我的朋友!
@using (Html.BeginForm("Franchise", "Application", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="modal-body">
<div class="row">
<input type="text" name="franid" id="franid" value="" class="hidden" />
<div id="my_camera" class="col-lg-6"></div>
<div id="results" class="col-lg-6">Your captured image will appear here...</div>
</div>
<form>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
</form>
</div>
<div class="modal-footer">
<center>
<button class="btn btn-success" type="button" id="btnCapture">Submit</button>
<button class="btn" type="button" data-dismiss="modal">Close</button>
</center>
</div>
}
</div>
<script>
$(function(){
$('#btnCapture').on('click', function(){
var file = document.getElementById("base64image").src;
$.ajax({
type: "POST",
url: '@Url.Action("Franchise")',
data: { base64image: file },
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (result) {
$('#myModal3').modal('hide'); //hide the modal
},
error: function () {
alert("Error while inserting data");
}
});
});
});
</script>
//In Controller
[HttpPost]
public ActionResult Franchise(string base64image)
{
if(!String.IsNullorEmpty(base64image))
{
//Maybe we should remove unnecessary string input in front of the value
string pictureObj = base64image.Replace("data:image/png;base64,", String.Empty);
var model = new tbl_Picture();
model.picture = System.Convert.FromBase64String(pictureObj );
//And then you can insert the model into db.
}
return Json(new {result = 1});
}
推荐阅读
- python - 从命令行调用脚本时导入模块不起作用
- python - 插入双向链表的任意位置(不是开头或结尾)的问题
- python - Python/Curses:第一次按键没有任何反应
- java - Spring boot REST Api 的 Angular 客户端发布请求
- django - Django - 当主键已经存在时,使用 excel 文件更新数据库会导致错误
- algorithm - 利润取决于先前的工作时间 - 工作调度问题
- ruby - Ruby 哈希对齐
- perl - Perl 即发即弃 HTTP 请求
- html - HTML 中的代码格式缩进出现在文档中
- mongodb - 在 MongoDB 中的另一个字段上分组的文档中计算一个字段中字符串的实例数?