Plugin jquery webcam không đăng hình ảnh được chụp

Tôi đang sử dụng plugin jquery webcam trong trang MVC4. Plugin có tại đây: http://www.xarg.org/project/jquery-webcam-plugin/.Plugin jquery webcam không đăng hình ảnh được chụp

Tôi đang sử dụng phương pháp lưu trên plugin sau khi chụp hình nhưng không được đăng lên hành động của bộ điều khiển.

Đây là trang 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>

Và đây là bộ điều khiển:

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); 
     } 
    } 
}

phương thức Save của bộ điều khiển được bao giờ gọi và trên thực tế, bằng cách sử dụng con đom đóm, không POST được thực hiện .

Nhân tiện. Máy ảnh hoạt động vì tôi có thể nhìn thấy nó trong canvas (DIV id = camera).

Và gọi lại OnCapture được gọi sau khi tôi nhấn nút chụp.

Bất kỳ trợ giúp nào về điều này, vui lòng?

Cảm ơn Jaime

Nguồn

2013-12-07 jstuardo

Bạn có thể giúp tôi ra .. Bạn có thể thực hiện một bài đăng thông thường để lưu hành động hay không. Hãy để nó được viết theo cách của nó, và sử dụng cURL hoặc một số phần mở rộng của trình duyệt của bạn để đăng một số dữ liệu về hành động và xem bạn có bị trúng không? –

Nemesv ... xin lỗi .. Tôi sẽ kiểm tra giải pháp khi tôi về nhà sau khoảng 3 giờ. Trân trọng. – jstuardo

hành động Save của bạn không được gọi vì jscam_canvas_only.swf chỉ chứa các chế độ "callback". Đối với API đầy đủ (vì vậy đối với chế độ "save"), bạn cần tải xuống và sử dụng jscam.swf.

Vì vậy, thay đổi thiết lập của bạn để webcam:

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

Bây giờ hành động Save của bạn sẽ được gọi nhưng tham số file sẽ luôn null, vì jscam.swf gửi dữ liệu hình ảnh như chuỗi thập lục phân trong cơ thể theo yêu cầu.

Cơ sở hạ tầng mô hình mặc định ràng buộc là không xử lý này vì vậy bạn cần phải viết một số mã bổ sung:

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); 
}

Bạn cần phải loại bỏ các tham số file và truy cập vào dữ liệu thô từ các Request.InputStream nhưng vì nó là một hệ thập lục phân chuỗi bạn cần phải chuyển đổi nó thành một byte[] trước khi lưu.

Không có chuyển đổi mặc định được xây dựng trong .NET nhưng SO là đầy đủ các giải pháp tốt:

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

Trong mẫu của tôi, tôi đã sử dụng 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; 
}

Nguồn

2013-12-12 21:22:38 nemesv

Cảm ơn !!!! nó hoạt động hoàn hảo !! – jstuardo

Plugin jquery webcam không đăng hình ảnh được chụp

Trả lời

Các vấn đề liên quan