Question

美好的一天！

我有一个代码，其中用户单击按钮，模态弹出并带有webcam.js。用户将从网络摄像头拍摄快照照片，然后将其保存到数据库。问题是我不知道如何将其保存到数据库。根据我在大多数论坛上看到的内容，它们将Image path保存到数据库中，但是我想要的是将 图片本身 保存到数据库中。

模型

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

查看

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

我尝试执行此forum中的操作，但是我不知道它将如何保存到数据库中。因此，我尝试恢复到此代码并在线搜索更多想法。

谢谢！

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

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

1 个答案: