تهیه تصویر توسط وبکم در Asp.Net
شنبه 20 تیر 1394در این مقاله قصد داریم نحوه استفاده از Webcam و تهیه عکس از آن را در تکنولوژی 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> </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>
خروجی کار :
- ASP.net
- 3k بازدید
- 4 تشکر