تهیه تصویر توسط وبکم در Asp.Net

شنبه 20 تیر 1394

در این مقاله قصد داریم نحوه استفاده از Webcam و تهیه عکس از آن را در تکنولوژی Asp.Net توضیح دهیم .

تهیه تصویر توسط وبکم در Asp.Net

ابتدا باید پلاگین Download jQuery Webcam Plugin دانلود کنید و کنار پروژه قرار دهید

صفحه Html به شکل زیر می باشد

<form id="form1" runat="server">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center">
            <u>نمایش زنده</u>
        </td>
        <td>
        </td>
        <td align="center">
            <u>تصویر</u>
        </td>
    </tr>
    <tr>
        <td>
            <div id="webcam">
            </div>
        </td>
        <td>
            &nbsp;
        </td>
        <td>
            <asp:Image ID="imgCapture" runat="server" Style="visibility: hidden; width: 320px;
                height: 240px" />
        </td>
    </tr>
</table>
<br />
<asp:Button ID="btnCapture" Text="عکس انداختن" runat="server" OnClientClick="return Capture();" />
<br />
<span id="camStatus"></span>
</form>
</body>
</html>

 

سپس در کد باید فضاهای نام زیر را اضافه کنیم


using System.IO;
using System.Web.Services;

 

سپس کد های زیر را وارد میکنیم


protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        if (Request.InputStream.Length > 0)
        {
            using (StreamReader reader = new StreamReader(Request.InputStream))
            {
                string hexString = Server.UrlEncode(reader.ReadToEnd());
                string imageName = DateTime.Now.ToString("dd-MM-yy hh-mm-ss");
                string imagePath = string.Format("~/Captures/{0}.png", imageName);
                File.WriteAllBytes(Server.MapPath(imagePath), ConvertHexToBytes(hexString));
                Session["CapturedImage"] = ResolveUrl(imagePath);
            }
        }
    }
}
 
private static byte[] ConvertHexToBytes(string hex)
{
    byte[] bytes = new byte[hex.Length / 2];
    for (int i = 0; i < hex.Length; i += 2)
    {
        bytes[i / 2] = Convert.ToByte(hex.Substring(i, 2), 16);
    }
    return bytes;
}
 
[WebMethod(EnableSession = true)]
public static string GetCapturedImage()
{
    string url = HttpContext.Current.Session["CapturedImage"].ToString();
    HttpContext.Current.Session["CapturedImage"] = null;
    return url;
}

 

تابع اصلی که سمت کاربر دوربین را فعال میکند به شکل زیر است


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src='<%=ResolveUrl("~/Webcam_Plugin/jquery.webcam.js") %>' type="text/javascript"></script>
<script type="text/javascript">
var pageUrl = '<%=ResolveUrl("~/Default.aspx") %>';
$(function () {
    jQuery("#webcam").webcam({
        width: 320,
        height: 240,
        mode: "save",
        swffile: '<%=ResolveUrl("~/Webcam_Plugin/jscam.swf") %>',
        debug: function (type, status) {
            $('#camStatus').append(type + ": " + status + '<br /><br />');
        },
        onSave: function (data) {
            $.ajax({
                type: "POST",
                url: pageUrl + "/GetCapturedImage",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    $("[id*=imgCapture]").css("visibility", "visible");
                    $("[id*=imgCapture]").attr("src", r.d);
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        },
        onCapture: function () {
            webcam.save(pageUrl);
        }
    });
});
function Capture() {
    webcam.capture();
    return false;
}
</script>

 

خروجی کار :

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

ایمان مدائنی

نویسنده 1299 مقاله در برنامه نویسان

کاربرانی که از نویسنده این مقاله تشکر کرده اند

در صورتی که در رابطه با این مقاله سوالی دارید، در تاپیک های انجمن مطرح کنید