MVC Сохранить захваченное изображение с веб-камеры в базу данных

Question

Добрый день!

У меня есть код, где пользователь нажимает на кнопку, появляется модал с веб-камерой.js. Пользователь сделает снимок с веб-камеры, который затем будет сохранен в базе данных. Проблема в том, что я не знаю, как сохранить его в базе данных. Из того, что я видел на большинстве форумов, они сохраняют Image path в базе данных, но я хочу сохранить само изображение в базе данных.

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>

Я пытался сделать то, что было на этом форуме , но я не могу понять, как это сохранится в моей базе данных. Поэтому я попытался вернуться к этому коду и найти другие идеи в Интернете.

Заранее спасибо!

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