有没有人得到这个http://www.xarg.org/project/jquery-webcam-plugin/,与aps.net mvc 3合作?我似乎无法使用WebImage类或BitmapImage解码图像。
我已经厌倦了使用Silverlight这样做,但我真的不确定如何上传图像。我不需要保存图像,我只是想处理它,我真正想做的是通过网络应用程序读取条形码。
我似乎无法找到将图像从Silverlight或flash上传到我的MVC应用程序的良好指南。
提前致谢。
答案 0 :(得分:7)
documentation包含许多示例。所需要的只是阅读和试用。
所以这就是你的Index.cshtml
视图如何使用浏览器的HTML5 canvas元素将来自网络摄像头的原始图像数据编码为PNG图像,该图像将使用AJAX请求发送到服务器:
<script src="@Url.Content("~/Scripts/jquery.webcam.js")" type="text/javascript"></script>
<div id="webcam"></div>
<a href="#" id="upload">Capture image and send for processing</a>
<script type="text/javascript">
var pos = 0, ctx = null, saveCB, image = [];
var canvas = document.createElement('canvas');
canvas.setAttribute('width', 320);
canvas.setAttribute('height', 240);
ctx = canvas.getContext('2d');
image = ctx.getImageData(0, 0, 320, 240);
var saveCB = function (data) {
var col = data.split(';');
var img = image;
for (var i = 0; i < 320; i++) {
var tmp = parseInt(col[i]);
img.data[pos + 0] = (tmp >> 16) & 0xff;
img.data[pos + 1] = (tmp >> 8) & 0xff;
img.data[pos + 2] = tmp & 0xff;
img.data[pos + 3] = 0xff;
pos += 4;
}
if (pos >= 4 * 320 * 240) {
ctx.putImageData(img, 0, 0);
$.post('@Url.Action("Upload")', { type: 'data', image: canvas.toDataURL("image/png") }, function (result) {
if (result.success) {
alert('The image was successfully sent to the server for processing');
}
});
pos = 0;
}
};
$('#webcam').webcam({
width: 320,
height: 240,
mode: 'callback',
swffile: '@Url.Content("~/scripts/jscam_canvas_only.swf")',
onSave: saveCB,
onCapture: function () {
webcam.save();
}
});
$('#upload').click(function () {
webcam.capture();
return false;
});
</script>
和您的家庭控制器:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Upload(string image)
{
image = image.Substring("data:image/png;base64,".Length);
var buffer = Convert.FromBase64String(image);
// TODO: I am saving the image on the hard disk but
// you could do whatever processing you want with it
System.IO.File.WriteAllBytes(Server.MapPath("~/app_data/capture.png"), buffer);
return Json(new { success = true });
}
}
答案 1 :(得分:2)
您可以尝试www.scriptcam.com,这个jquery插件提供了大量文档。