گرفتن تصویر از WebCam در MVC

در این مقاله میخواهیم گرفتن تصویر از WebCam در MVC را آموزش دهیم.در حال حاضر اکثر برنامه های کاربردی آنلاین نیاز به وب کم و قابلیت گرفتن تصویر هستند. اکثر سایت های شبکه های اجتماعی استفاده از این نوع عملکرد در برنامه های خود برای گرفتن تصاویرو مشخصات کاربراستفاده میکنند.

این مقاله نشان میدهد که چگونه یک تصویر با استفاده از یک وب کم (Webcam) در MVC بگیریم و در این نرم افزار ما یک جی کوئری webcam.js ، که پلاگینی برای گرفتن تصاویر میباشد استفاده میکنیم. در حال حاضر اکثر برنامه های کاربردی آنلاین نیاز به وب کم و قابلیت گرفتن تصویر هستند. اکثر سایت های شبکه های اجتماعی استفاده از این نوع عملکرد در برنامه های خود برای گرفتن تصاویرو مشخصات کاربراستفاده میکنند.

در این مقاله خواهیم دید که چگونه یک تصویر از وب کم با استفاده از webcam.js در MVC بگیریم.

روال کار:

1- ایجاد یک برنامه MVC

2- دانلود و اضافه کردن webcam.js و فایل های مرجع مرتبط به پروژه

3- اضافه کردن کنترلر به نام PhotoController

4- اضافه کردن ویو Index

5-اضافه کردن متد Capture

6-اضافه کردن اسکریپت برای گرفتن تصویر

7-اضافه کردن Action متد و اسکریپت برای اتصال تصویر

8-اضافه کردن Action متد Index در حالت Post

9-نمایش ویو index در پنجره جدید

10-قطعه کد Changephoto.cshtml

11- قطعه کد کنترلرPhoto

12-قطعه کد Index.cshtml

13-در نهایت خروجی کار

ایجاد یک برنامه MVC

برنامه ویژوال استدیو خود را باز کنید ویک پروژه جدید ازنوع MVC به نام WebcamMVC ایجاد کنید:

در پنجره بعد گزینه Basic را انتخاب کرده و روی ok کلیک کنید :

دانلود و اضافه کردن webcam.js و فایل های مرجع مرتبط به پروژه :

حال باید webcam.js و فایل های دیگر را به پروژه اضافه کنید برای دانلود به آدرس زیر مراجعه کنید:

jQuery-webcam.

در اینجا میتوانید فایل فشرده را دانلود کنید:

فایل های موجود در پوشه :

حال باید به پوشه Script فایل های دانلود شده رو اضافه کنیم:

اضافه کردن کنترلر Photo:

روی پوشه کنتلر خود کلیک راست کرده و یک کنترلر جدید بسازید:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
using System.IO;  
namespace WebcamMVC.Controllers  
{  
    public class PhotoController : Controller  
    {  
        [HttpGet]  
        public ActionResult Index()  
        {  
            return View();  
        }  
    }  
}

همانطور که مشاهده میکنید یک اکشن متد به نام Index نیز ایجاد شده است حال باید برای این اکشن متد یک ویو بسازیم.

اضافه کردن ویو Index :

درون اکشن متد کلیک راست کرده و گزینه add view را انتاخاب کنید یک دیالوگ برای پیکربندی ویو باز میشود نام ویو را تغییر ندهید و روی دکمه add کلیک کنید پس از ساخت ویو تگ های html و اسکریپت ها برای گرفتن و فرستادن تصویر به کنترلر را اضافه میکنیم:

<div style="margin: 0 auto; width: 980px; text-align: center">  
        <div style="float: left; border: 4px solid #ccc; padding: 5px">  
            <div id="Camera">  
            </div>  
            <br>  
            <input type="button" value="گرفتن تصویر" />  
        </div>  
        <div style="float: left; margin-left: 20px; border: 4px solid #ccc; padding: 5px">  
            <img id="show" style="width: 320px; height: 240px;" src="../../WebImages/person.jpg" />  
            <br>  
            <br>  
            <input id="Submit1" type="submit" value="ارسال" />  
        </div>  
  </div>

حال نوبت به اضافه کردن اسکریپت ها میرسد این اسکریپت برای نمایش وب کم :

@section scripts  
{  
        <script src="@Url.Content("~/Scripts/jquery.webcam.js")">  
        </script>  
        <script type="text/javascript">  
            $("#Camera").webcam({  
                width: 320,  
                height: 240,  
                mode: "save",  
                swffile: "@Url.Content("~/Scripts/jscam.swf")",  
                onTick: function () { },  
                onSave: function () {  
                    UploadPic();  
                },  
                onCapture: function () {  
                    webcam.save("@Url.Content("~/Photo/Capture")/");  
             },  
                debug: function () { },  
                onLoad: function () { }  
  
            });  
  
        </script>  
          }

حال برنامه رو اجرا کنید :

اضافه کردن متد Capture :

برای گرفتن تصویر از متد Capture استفاده میکنیم درون آن از متد دیگری به نام String_To_Byte2 استفاده شده است:

    public ActionResult Capture()  
            {  
                var stream = Request.InputStream;  
                string dump;  
      
                using (var reader = new StreamReader(stream))  
                {  
                    dump = reader.ReadToEnd();  
      
                    DateTime nm = DateTime.Now;  
      
                    string date = nm.ToString("yyyymmddMMss");  
      
                    var path = Server.MapPath("~/WebImages/" + date + "test.jpg");  
      
                    System.IO.File.WriteAllBytes(path, String_To_Bytes2(dump));  
      
                    ViewData["path"] = date + "test.jpg";  
      
                    Session["val"] = date + "test.jpg";  
                }  
      
                return View("Index");  
            }

متد Capture شامل کد برای گرفتن یک Stream از تصویر گرفته شده سپس متد دیگری به نام String_To_Bytes2 برای نوشتن رشته به بایت فراخوانی میشود و سپس در پوشه WebImages در پروژه ذخیره میکند.

در متد Capture نام تصویر را در Session نگهداری میکنیم که در هرجایی در برنامه در دسترس باشد.

متد String_To_Bytes2 :

    private byte[] String_To_Bytes2(string strInput)  
    {  
        int numBytes = (strInput.Length) / 2;  
        byte[] bytes = new byte[numBytes];  
        for (int x = 0; x < numBytes; ++x)  
        {  
            bytes[x] = Convert.ToByte(strInput.Substring(x * 2, 2), 16);  
        }  
        return bytes;  
    }

اضافه کردن اسکریپت برای گرفتن تصویر

این اسکریپت یک تصویر میگیرد:

@section scripts  
{  
        <script src="@Url.Content("~/Scripts/jquery.webcam.js")">  
        </script>  
        <script type="text/javascript">  
            $("#Camera").webcam({  
                width: 320,  
                height: 240,  
                mode: "save",  
                swffile: "@Url.Content("~/Scripts/jscam.swf")",  
                onTick: function () { },  
                onSave: function () {  
                    UploadPic();  
                },  
                onCapture: function () {  
                    webcam.save("@Url.Content("~/Photo/Capture")/");  
             },  
                debug: function () { },  
                onLoad: function () { }  
            });  
        </script>  
          }  
onCapture: function () {  
                    webcam.save("@Url.Content("~/Photo/Capture")/");  
             },

حالا در رویداد onclick تابع webcam.save(); فراخوانی میشود:

    <input type="button" value="Capture" onclick="webcam.capture();" />

اضافه کردن Action متد و اسکریپت برای اتصال تصویر

برای اتصال تصویر یک متد Json با نام Rebind که زمانی که روی دکمه گرفتن تصویر کلیک شود فراخوانی میشود:

    public JsonResult Rebind()  
    {  
    string path = "http://localhost:55694/WebImages/" + Session["val"].ToString();  
    return Json(path, JsonRequestBehavior.AllowGet);  
    }

این متد مسیر تصویر که ما گرفتیم را بر میگرداند.

تابع ajax به نام متد Uploadpic تابع json را فراخوانی میکند که مسیر تصویر را بر میگرداند ما این مسیر را به کنترل image متصل میکنیم:

    function UploadPic() {  
            $.ajax({  
                type: 'POST',  
                url: ("@Url.Content("~/Photo/Rebind")/"),  
                dataType: 'json',  
                success: function (data) {  
                    $("#show").attr("src", data);  
                    document.getElementById('Submit1').disabled = false;  
                    alert("Photo Capture successfully!");  
                                }  
            });  
                     }

و خود تابع UploadPic در اسکریپت Webcam فراخوانی میشود:

    onSave: function ()  
    {  
    UploadPic();  
    },

اضافه کردن Action متد Index در حالت Post

ما به ارسال مقدار برای نگهداری نام تصویر نیاز داریم. برای این ما یک متد در حالت Post به نام index مینویسیم که به عنوان ورودی نام تصویر را میگیرد.

    [HttpPost]  
    public ActionResult Index(string Imagename)  
    {  
    ViewBag.pic = "http://localhost:55694/WebImages/" + Session["val"].ToString();  
    return View();  
    }

حالا باید یک اسکریپت برای فراخوانی اکشن متد index و فرستادن نام تصویر برای آن ، برای این کار از اسکریپت زیر استفاده میکنیم:

    function Uploadsubmit()   
    {  
            debugger;  
            var src = $('img').attr('src');  
            src_array = src.split('/');   
            src = src_array[4];  
            if (src != "") {  
                $.ajax({  
                    type: 'POST',  
                    url: ("@Url.Content("~/Photo/Index")/"),  
                   dataType: 'json',  
                   data: { Imagename: src },  
                   success: function () {  
                   }  
               });  
    }

برای فراخوانی متد بالا باید آنرا در رویداد onclick دکمه ارسال قراردهیم:

    <input id="Submit1" type="submit" onclick="Uploadsubmit();" value="submit" />

نمایش ویو index در پنجره جدید

حالا میخواهیم ویو index را در یک پنجره جدید باز کنیم ، یک اکشن متد با نام ChangePhoto در کنترلر مینویسیم:

    [HttpGet]  
        public ActionResult Changephoto()  
        {  
            if (Convert.ToString(Session["val"]) != string.Empty)  
            {  
                ViewBag.pic = "http://localhost:55694/WebImages/" + Session["val"].ToString();  
            }  
            else  
            {  
                ViewBag.pic = "../../WebImages/person.jpg";  
            }  
            return View();  
      
       }

درون این اکشن متد session را چک میکنیم که آیا پر است یا نه اگر پر است نام تصویر را از آن گرفته و به آخر آدرس اضافه کرده ودر Viewbag میریزیم و درصورت خالی بودن تصویر پیش فرض را در viewbag قرار میدهیم سپس یک ویو برای این متد به همین نام میسازیم.

درون ویو آن تغییرات زیر را اعمال میکنیم:

@{  
    ViewBag.Title = "Changephoto";  
}  
<script type="text/javascript">  
    function ShowPopUp() {  
        window.open('/Photo/Index/', "wndPopUp", 'width=720,height=400,left=100,top=100,resizable=no');  
    }  
</script>  
<img id="Userpic" src="@ViewBag.pic" />  
<br />  
<input type="button" id="btnSave" value="Take Photo" onclick="ShowPopUp();" />

قطعه کد Changephoto.cshtml

    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.Mvc;  
    using System.IO;  
    namespace WebcamMVC.Controllers  
    {  
        public class PhotoController : Controller  
        {  
            [HttpGet]  
            public ActionResult Index()  
            {  
                Session["val"] = "";  
                return View();  
            }  
            [HttpPost]  
            public ActionResult Index(string Imagename)  
            {  
                           ViewBag.pic = "http://localhost:55694/WebImages/" + Session["val"].ToString();  
                return View();  
            }  
      
            [HttpGet]  
            public ActionResult Changephoto()  
            {  
                if (Convert.ToString(Session["val"]) != string.Empty)  
                {  
                    ViewBag.pic = "http://localhost:55694/WebImages/" + Session["val"].ToString();  
                }  
                else  
                {  
                    ViewBag.pic = "../../WebImages/person.jpg";  
                }  
                return View();  
            }  
             public JsonResult Rebind()  
            {  
                string path = "http://localhost:55694/WebImages/" + Session["val"].ToString();  
                return Json(path, JsonRequestBehavior.AllowGet);  
            }  
            public ActionResult Capture()  
            {  
                var stream = Request.InputStream;  
                string dump;  
                using (var reader = new StreamReader(stream))  
                {  
                    dump = reader.ReadToEnd();  
                    DateTime nm = DateTime.Now;  
                    string date = nm.ToString("yyyymmddMMss");  
                    var path = Server.MapPath("~/WebImages/" + date + "test.jpg");  
                    System.IO.File.WriteAllBytes(path, String_To_Bytes2(dump));  
                    ViewData["path"] = date + "test.jpg";  
                    Session["val"] = date + "test.jpg";  
                }  
                return View("Index");  
            }  
           private byte[] String_To_Bytes2(string strInput)  
            {  
                int numBytes = (strInput.Length) / 2;  
                byte[] bytes = new byte[numBytes];  
                for (int x = 0; x < numBytes; ++x)  
                {  
                    bytes[x] = Convert.ToByte(strInput.Substring(x * 2, 2), 16);  
                }  
                return bytes;  
            }  
        }  
    }

قطعه کد Index.cshtml

<script type="text/javascript">
    function UploadPic() {
        $.ajax({
            type: 'POST',
            url: ("@Url.Content("~/Photo/Rebind")/"),
            dataType: 'json',
            success: function (data) {
                $("#show").attr("src", data);
                document.getElementById('Submit1').disabled = false;
                alert("Photo Capture successfully!");                
            }
        });
    }

    function Uploadsubmit() {
        debugger;
        var src = $('img').attr('src');
        src_array = src.split('/');
        src = src_array[4];
        if (src != "") {
            $.ajax({
                type: 'POST',
                url: ("@Url.Content("~/Photo/Index")/"),
               dataType: 'json',
               data: { Imagename: src },
               success: function () { }
           });
            window.opener.location.href = "http://localhost:55694/Photo/Changephoto";
            self.close();}}
</script>
@using (Html.BeginForm())
{
@section scripts
{
        <script src="@Url.Content("~/Scripts/jquery.webcam.js")">
        </script>
        <script type="text/javascript">
            $("#Camera").webcam({
                width: 320,
                height: 240,
                mode: "save",
                swffile: "@Url.Content("~/Scripts/jscam.swf")",
                onTick: function () { },
                onSave: function () {
                    UploadPic();
                },
                onCapture: function () {
                    webcam.save("@Url.Content("~/Photo/Capture")/");
             },
                debug: function () { },
                onLoad: function () { }

            });

        </script>
    }
    <div style="margin: 0 auto; width: 980px; text-align: center">
        <div style="float: left; border: 4px solid #ccc; padding: 5px">
            <div id="Camera">
            </div>
            <br>
            <input type="button" value="گرفتن تصویر" onclick="webcam.capture();" />
        </div>
        <div style="float: left; margin-left: 20px; border: 4px solid #ccc; padding: 5px">
            <img id="show" style="width: 320px; height: 240px;" src="../../WebImages/person.jpg" />
            <br>
            <br>
            <input id="Submit1" type="submit" onclick="Uploadsubmit();" value="ارسال" />
        </div>
    </div>
    
}
<script type="text/javascript">
    window.onload = load();

    function load() {
        debugger;
        document.getElementById('Submit1').disabled = true;
    }

</script>

در نهایت خروجی کار

فایل های ضمیمه

WebcamMVC.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان