jst*_*rdo 6 asp.net-mvc-4 jquery-webcam-plugin
我在MVC4页面中使用jquery网络摄像头插件.该插件位于:http://www.xarg.org/project/jquery-webcam-plugin/.
我在捕获图像后在插件上使用save方法,但它没有发布到控制器操作.
这是cshtml页面:
@{
ViewBag.Title = "Index";
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>@ViewBag.Title - Prueba WebCam</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/styles/base")
@Scripts.Render("~/scripts/jquery", "~/scripts/jqueryui", "~/scripts/webcam")
<script type="text/javascript">
$(function () {
$("#camera").webcam({
width: 320,
height: 240,
mode: "save",
swffile: "@Url.Content("~/Scripts/WebCam/jscam_canvas_only.swf")",
onTick: function () { },
onSave: function () { alert('Almacenamiento realizado') },
onCapture: function () { webcam.save("@Url.Action("Save")"); alert('Captura realizada'); },
debug: function () { },
onLoad: function () { }
});
});
function CaptureAndSave() {
webcam.capture();
}
</script>
</head>
<body class="home desytec">
<header>
</header>
<!-- MAIN -->
<div id="main">
<!-- wrapper-main -->
<div class="wrapper">
<!-- headline -->
<div class="clear"></div>
<div id="headline">
<span class="main"></span>
<span class="sub"></span>
</div>
<!-- ENDS headline -->
<!-- content -->
<div id="content">
<div id="camera"></div>
<br /><br /><br />
<input type="button" onclick="CaptureAndSave();" value="Capturar" />
</div>
<!-- ENDS content -->
</div>
<!-- ENDS wrapper-main -->
</div>
<!-- ENDS MAIN -->
<footer>
</footer>
</body>
</html>
这是控制器:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Capture.Controllers
{
public class CaptureController : Controller
{
//
// GET: /Capture/
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult Save(HttpPostedFileBase file)
{
try
{
if (file != null)
{
string pic = System.IO.Path.GetFileName(file.FileName);
string path = System.IO.Path.Combine(Server.MapPath("~/Captures"), pic);
file.SaveAs(path);
return Json(true, JsonRequestBehavior.AllowGet);
}
}
catch
{
}
return Json(true, JsonRequestBehavior.AllowGet);
}
}
}
从不调用控制器的Save方法,实际上,通过使用firebug,不会进行POST.
顺便说说.相机正常工作,因为我可以在画布中看到它(DIV id =相机).
按下捕获按钮后调用OnCapture回调.
对此有任何帮助吗？
谢谢Jaime
您的Save操作不会被调用，因为jscam_canvas_only.swf它只包含"callback"模式。对于完整的 API（对于该"save"模式），您需要下载并使用jscam.swf.
因此，将您的webcam设置更改为：
$("#camera").webcam({
//...
swffile: "@Url.Content("~/Scripts/WebCam/jscam.swf")",
//...
});
现在您的Save操作将被调用，但file参数将始终为空，因为jscam.swf在请求正文中以十六进制字符串形式发送图像数据。
默认模型绑定基础结构不处理此问题，因此您需要编写一些额外的代码：
if (Request.InputStream.Length > 0)
{
string pic = System.IO.Path.GetFileName("capture.jpg");
string path = System.IO.Path.Combine(Server.MapPath("~/Captures"), pic);
using (var reader = new StreamReader(Request.InputStream))
{
System.IO.File.WriteAllBytes(path, StringToByteArray(reader.ReadToEnd()));
}
return Json(true, JsonRequestBehavior.AllowGet);
}
您需要删除file参数并从 中访问原始数据Request.InputStream，但由于它是十六进制字符串，因此您需要byte[]在保存之前将其转换为 a 。
.NET 中没有内置默认转换，但 SO 充满了很好的解决方案：
在我的示例中，我使用了这种方法：
public static byte[] StringToByteArray(String hex)
{
int NumberChars = hex.Length/2;
byte[] bytes = new byte[NumberChars];
using (var sr = new StringReader(hex))
{
for (int i = 0; i < NumberChars; i++)
bytes[i] =
Convert.ToByte(new string(new char[2]{(char)sr.Read(), (char)sr.Read()}), 16);
}
return bytes;
}