MVC将捕获的网络摄像头图像保存到数据库-Java 学习之路

美好的一天！

我有一个代码，用户点击一个按钮，模式会弹出一个webcam.js . 用户将从网络摄像头拍摄快照照片，然后将其保存到数据库中 . 问题是我不知道如何将其保存到数据库 . 从我在大多数论坛中看到的，他们将 Image path 保存到数据库，但我想要的是将 Image itself 保存到数据库 .

MODEL

public partial class tbl_Picture
{
    public string picture_id { get; set; }
    public string operator_id { get; set; }
    public byte[] picture { get; set; }
}

CONTROLLER

[HttpPost]
    public ActionResult Franchise()
    {

        return View();
    }

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>

MODAL

@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

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

我试着做_740386中的内容，但我无法理解它将如何保存到我的数据库中 . 因此，我尝试恢复此代码并在线搜索更多创意 .

提前致谢！

1 回答

你可以使用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});
    }

回复于 2024-05-02T10:46:47+08:00

MVC将捕获的网络摄像头图像保存到数据库

1 回答

相关问题