个人中心
gpt4 book ai didi

asp.net-mvc-4 - jquery 网络摄像头插件不发布捕获的图像

转载 作者：行者123 更新时间：2023-12-03 18:33:44 25 4
gpt4 key购买 nike

我在 MVC4 页面中使用 jquery 网络摄像头插件。插件在这里:http://www.xarg.org/project/jquery-webcam-plugin/ .

捕获图像后，我在插件上使用了 save 方法，但它没有发布到 Controller 操作中。

这是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>

这是 Controller : 
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);
        }
    }
}

Controller 的保存方法永远不会被调用，事实上，通过使用 Firebug ，没有完成 POST。

顺便一提。相机可以工作，因为我可以在 Canvas 中看到它(DIV id = 相机)。

按下捕获按钮后会调用 OnCapture 回调。

请问这方面有什么帮助吗？

谢谢
海梅

最佳答案

您的 Save未调用操作，因为 jscam_canvas_only.swf仅包含 "callback"模式。对于完整的 API(所以对于 "save" 模式)，您需要下载并使用 jscam.swf .

所以改变你的webcam设置为:

$("#camera").webcam({
    //...
    swffile: "@Url.Content("~/Scripts/WebCam/jscam.swf")",
    //...
});

现在您的 Save将调用操作，但 file参数将始终为空，因为 jscam.swf在请求正文中将图像数据作为十六进制字符串发送。

默认模型绑定(bind)基础设施不处理这个，所以你需要编写一些额外的代码: 
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[]在保存之前。

.NET 中没有内置默认转换，但 SO 充满了很好的解决方案:

How do you convert Byte Array to Hexadecimal String, and vice versa?

在我的示例中，我使用了 this method : 
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;
}

关于asp.net-mvc-4 - jquery 网络摄像头插件不发布捕获的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20448243/

25 4 0
文章推荐： delphi - 自动检测应用程序 "Type"
文章推荐： delphi - 查询用户是否为群组成员
文章推荐： multithreading - Delphi 在一个线程中搜索文件
文章推荐： delphi - 在 Delphi 中使用 DLL 注册
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com