1
Answer

Taking Photo From a Web Cam and Saving to Folder & DB

Jes Sie

Jes Sie
5y
955
1
I am trying to take a photo using a web cam and then save it to a folder inside my application and save the link to SQL Server DB. 
 
I found a good article in doing this. I tried it in a new applicaiton and it works perfectly. But, when I use it inside my application I didn't get bytes from the uploaded image. Can someone help me how to do this? Below is the code snipet.
 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Captureimage.aspx.cs" Inherits="WebCam_Captureimage" %>  
  2.   
  3. >  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title>Capture Imagetitle>  
  7.   
  8.     <link rel="stylesheet" type="text/css" href="css/Master.css" />  
  9.     <style type="text/css">  
  10.         #webcam, #canvas  
  11.         {  
  12.             width: 272px;  
  13.             border: 1px solid #ccc;  
  14.             background: #eee;  
  15.             -webkit-border-radius: 10px;  
  16.             -moz-border-radius: 10px;  
  17.             border-radius: 10px;  
  18.         }  
  19.   
  20.         #webcam  
  21.         {  
  22.             position: relative;  
  23.             margin-top: 5px;  
  24.             margin-bottom: 10px;  
  25.         }  
  26.   
  27.             #webcam > span  
  28.             {  
  29.                 z-index: 2;  
  30.                 position: absolute;  
  31.                 color: #eee;  
  32.                 font-size: 10px;  
  33.                 bottom: -16px;  
  34.                 left: 152px;  
  35.             }  
  36.   
  37.             #webcam > img  
  38.             {  
  39.                 z-index: 1;  
  40.                 position: absolute;  
  41.                 border: 0px none;  
  42.                 padding: 0px;  
  43.                 bottom: -40px;  
  44.                 left: 89px;  
  45.             }  
  46.   
  47.             #webcam > div  
  48.             {  
  49.                 border: 1px solid #ccc;  
  50.                 position: absolute;  
  51.                 right: -90px;  
  52.                 padding: 5px;  
  53.                 -webkit-border-radius: 8px;  
  54.                 -moz-border-radius: 8px;  
  55.                 border-radius: 8px;  
  56.                 cursor: pointer;  
  57.             }  
  58.   
  59.             #webcam a  
  60.             {  
  61.                 background: #fff;  
  62.                 font-weight: bold;  
  63.             }  
  64.   
  65.                 #webcam a > img  
  66.                 {  
  67.                     border: 0px none;  
  68.                 }  
  69.   
  70.         #canvas  
  71.         {  
  72.             border: 1px solid #ccc;  
  73.             background: #eee;  
  74.         }  
  75.   
  76.         #flash  
  77.         {  
  78.             position: absolute;  
  79.             top: 0px;  
  80.             left: 0px;  
  81.             z-index: 5000;  
  82.             width: 100%;  
  83.             height: 500px;  
  84.             background-color: #c00;  
  85.             display: none;  
  86.         }  
  87.   
  88.         object  
  89.         {  
  90.             display: block; /* HTML5 fix */  
  91.             position: relative;  
  92.             z-index: 1000;  
  93.         }  
  94.     style>  
  95.   
  96.     <script language="javascript" type="text/javascript">  
  97.         function clearText(field) {  
  98.             if (field.defaultValue == field.value) field.value = '';  
  99.             else if (field.value == '') fieldfield.value = field.defaultValue;  
  100.         }  
  101.     script>  
  102.   
  103.     <link href="../css/Master.css" rel="stylesheet" type="text/css" />  
  104.   
  105.     <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript">script>  
  106.   
  107.     <script src="Scripts/jquery.webcam.js" type="text/javascript">script>  
  108.   
  109.   
  110.   
  111. head>  
  112. <body>  
  113.   
  114.     <div class="PhotoUploadWrapper">  
  115.         <div class="PhotoUpoloadCoseBtn">  
  116.         div>  
  117.         <div class="PhotoUploadContent">  
  118.             <div class="PhotoUpoloadHeader">  
  119.                 Select photo  
  120.             div>  
  121.             <div class="PhotoUpoloadLeft">  
  122.                 <div class="PhotoUpoloadRightHeader">  
  123.                     <p style="float: left; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 35px; text-indent: 18px; font-weight: bold; color: #FFF;">  
  124.                         Upload Photo  
  125.                     p>  
  126.   
  127.                 div>  
  128.                 <div class="PhotoUpoloadLeftMainCont">  
  129.                     <div class="photo_selected_BG">  
  130.                         <div style="padding: 20px 0px 0px 24px;">  
  131.                             <div id="webcam">  
  132.                             div>  
  133.                         div>  
  134.                     div>  
  135.                     <div style="text-align: center; margin-bottom: 46px;">  
  136.                         <a href="javascript:webcam.capture();void(0);">  
  137.   
  138.                             <input type="image" id="capture" onclick="javascript: document.getElementById('Submit').disabled = false;"  
  139.                                 src="images/captureBTN.png" alt="#" />a>  
  140.                     div>  
  141.                 div>  
  142.             div>  
  143.             <div class="PhotoUpoloadRight">  
  144.                 <div class="PhotoUpoloadLeftHeader">  
  145.                     <p style="float: left; font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 35px; text-indent: 18px; font-weight: bold; color: #FFF;">  
  146.                         Web Camera  
  147.                     p>  
  148.   
  149.                 div>  
  150.                 <div class="photo_selected_BG">  
  151.                     <div style="padding: 26px 0px 0px 25px;">  
  152.                         <canvas id="canvas" width="320" height="240">canvas>  
  153.                     div>  
  154.                 div>  
  155.                 <div style="text-align: center; margin-bottom: 46px;">  
  156.                     <a href="#" id="filter" onclick="javascript:UploadPic();">  
  157.   
  158.                         <input type="image" id="Submit" runat="server" src="images/submitBTN.png" />a>  
  159.                 div>  
  160.             div>  
  161.         div>  
  162.     div>  
  163.   
  164.   
  165.     <script type="text/javascript">  
  166.   
  167.         var pos = 0;  
  168.         var ctx = null;  
  169.         var cam = null;  
  170.         var image = null;  
  171.   
  172.         var filter_on = false;  
  173.         var filter_id = 0;  
  174.   
  175.         function changeFilter() {  
  176.             if (filter_on) {  
  177.                 filter_id = (filter_id + 1) & 7;  
  178.             }  
  179.         }  
  180.   
  181.         function toggleFilter(obj) {  
  182.             if (filter_on = !filter_on) {  
  183.                 obj.parentNode.style.borderColor = "#c00";  
  184.             } else {  
  185.                 obj.parentNode.style.borderColor = "#333";  
  186.             }  
  187.         }  
  188.   
  189.         jQuery("#webcam").webcam({  
  190.   
  191.             //width: 272,  
  192.             width: 272,  
  193.             height: 202,  
  194.             mode: "callback",  
  195.             swffile: "jscam_canvas_only.swf",  
  196.   
  197.             onTick: function (remain) {  
  198.   
  199.                 if (0 == remain) {  
  200.                     jQuery("#status").text("Cheese!");  
  201.                 } else {  
  202.                     jQuery("#status").text(remain + " seconds remaining...");  
  203.                 }  
  204.             },  
  205.   
  206.             onSave: function (data) {  
  207.   
  208.                 var col = data.split(";");  
  209.                 var img = image;  
  210.   
  211.                 if (false == filter_on) {  
  212.   
  213.                     for (var i = 0; i < 320; i++) {  
  214.                         var tmp = parseInt(col[i]);  
  215.                         img.data[pos + 0] = (tmp >> 16) & 0xff;  
  216.                         img.data[pos + 1] = (tmp >> 8) & 0xff;  
  217.                         img.data[pos + 2] = tmp & 0xff;  
  218.                         img.data[pos + 3] = 0xff;  
  219.                         pos += 4;  
  220.                     }  
  221.   
  222.                 } else {  
  223.   
  224.                     var id = filter_id;  
  225.                     var r, g, b;  
  226.                     var r1 = Math.floor(Math.random() * 255);  
  227.                     var r2 = Math.floor(Math.random() * 255);  
  228.                     var r3 = Math.floor(Math.random() * 255);  
  229.   
  230.                     for (var i = 0; i < 320; i++) {  
  231.                         var tmp = parseInt(col[i]);  
  232.   
  233.                         /* Copied some xcolor methods here to be faster than calling all methods inside of xcolor and to not serve complete library with every req */  
  234.   
  235.                         if (id == 0) {  
  236.                             r = (tmp >> 16) & 0xff;  
  237.                             g = 0xff;  
  238.                             b = 0xff;  
  239.                         } else if (id == 1) {  
  240.                             r = 0xff;  
  241.                             g = (tmp >> 8) & 0xff;  
  242.                             b = 0xff;  
  243.                         } else if (id == 2) {  
  244.                             r = 0xff;  
  245.                             g = 0xff;  
  246.                             b = tmp & 0xff;  
  247.                         } else if (id == 3) {  
  248.                             r = 0xff ^ ((tmp >> 16) & 0xff);  
  249.                             g = 0xff ^ ((tmp >> 8) & 0xff);  
  250.                             b = 0xff ^ (tmp & 0xff);  
  251.                         } else if (id == 4) {  
  252.   
  253.                             r = (tmp >> 16) & 0xff;  
  254.                             g = (tmp >> 8) & 0xff;  
  255.                             b = tmp & 0xff;  
  256.                             var v = Math.min(Math.floor(.35 + 13 * (r + g + b) / 60), 255);  
  257.                             r = v;  
  258.                             g = v;  
  259.                             b = v;  
  260.                         } else if (id == 5) {  
  261.                             r = (tmp >> 16) & 0xff;  
  262.                             g = (tmp >> 8) & 0xff;  
  263.                             b = tmp & 0xff;  
  264.                             if ((r += 32) < 0) r = 0;  
  265.                             if ((g += 32) < 0) g = 0;  
  266.                             if ((b += 32) < 0) b = 0;  
  267.                         } else if (id == 6) {  
  268.                             r = (tmp >> 16) & 0xff;  
  269.                             g = (tmp >> 8) & 0xff;  
  270.                             b = tmp & 0xff;  
  271.                             if ((r -= 32) < 0) r = 0;  
  272.                             if ((g -= 32) < 0) g = 0;  
  273.                             if ((b -= 32) < 0) b = 0;  
  274.                         } else if (id == 7) {  
  275.                             r = (tmp >> 16) & 0xff;  
  276.                             g = (tmp >> 8) & 0xff;  
  277.                             b = tmp & 0xff;  
  278.                             r = Math.floor(r / 255 * r1);  
  279.                             g = Math.floor(g / 255 * r2);  
  280.                             b = Math.floor(b / 255 * r3);  
  281.                         }  
  282.   
  283.                         img.data[pos + 0] = r;  
  284.                         img.data[pos + 1] = g;  
  285.                         img.data[pos + 2] = b;  
  286.                         img.data[pos + 3] = 0xff;  
  287.                         pos += 4;  
  288.                     }  
  289.                 }  
  290.   
  291.                 if (pos >= 0x4B000) {  
  292.                     ctx.putImageData(img, 0, 0);  
  293.                     pos = 0;  
  294.                     var canvas = document.getElementById("canvas");  
  295.                     //  $.post("http://192.168.1.199/HaomaTesting/WebCam/UploadImage.aspx", { image: canvas.toDataURL("image/png") });  
  296.   
  297.                 }  
  298.             },  
  299.   
  300.             onCapture: function () {  
  301.                 webcam.save();  
  302.                 jQuery("#flash").css("display", "block");  
  303.                 jQuery("#flash").fadeOut(100, function () {  
  304.                     jQuery("#flash").css("opacity", 1);  
  305.                 });  
  306.             },  
  307.   
  308.             debug: function (type, string) {  
  309.   
  310.                 jQuery("#status").html(type + ": " + string);  
  311.   
  312.             },  
  313.   
  314.             onLoad: function () {  
  315.   
  316.                 var cams = webcam.getCameraList();  
  317.                 for (var i in cams) {  
  318.                     jQuery("#cams").append("<li>" + cams[i] + "li>");  
  319.                 }  
  320.             }  
  321.   
  322.         }  
  323.   
  324. );  
  325.   
  326.         function getPageSize() {  
  327.   
  328.             var xScroll, yScroll;  
  329.   
  330.             if (window.innerHeight && window.scrollMaxY) {  
  331.                 xScroll = window.innerWidth + window.scrollMaxX;  
  332.                 yScroll = window.innerHeight + window.scrollMaxY;  
  333.             } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac  
  334.                 xScroll = document.body.scrollWidth;  
  335.                 yScroll = document.body.scrollHeight;  
  336.             } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari  
  337.                 xScroll = document.body.offsetWidth;  
  338.                 yScroll = document.body.offsetHeight;  
  339.             }  
  340.   
  341.             var windowWidth, windowHeight;  
  342.   
  343.             if (self.innerHeight) { // all except Explorer  
  344.                 if (document.documentElement.clientWidth) {  
  345.                     windowWidth = document.documentElement.clientWidth;  
  346.                 } else {  
  347.                     windowWidth = self.innerWidth;  
  348.                 }  
  349.                 windowHeight = self.innerHeight;  
  350.             } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode  
  351.                 windowWidth = document.documentElement.clientWidth;  
  352.                 windowHeight = document.documentElement.clientHeight;  
  353.             } else if (document.body) { // other Explorers  
  354.                 windowWidth = document.body.clientWidth;  
  355.                 windowHeight = document.body.clientHeight;  
  356.             }  
  357.   
  358.             // for small pages with total height less then height of the viewport  
  359.             if (yScroll < windowHeight) {  
  360.                 pageHeight = windowHeight;  
  361.             } else {  
  362.                 pageHeight = yScroll;  
  363.             }  
  364.   
  365.             // for small pages with total width less then width of the viewport  
  366.             if (xScroll < windowWidth) {  
  367.                 pageWidth = xScroll;  
  368.             } else {  
  369.                 pageWidth = windowWidth;  
  370.             }  
  371.             return [pageWidth, pageHeight];  
  372.         }  
  373.   
  374.         window.addEventListener("load", function () {  
  375.   
  376.             jQuery("body").append("<div id=\"flash\">div>");  
  377.   
  378.             var canvas = document.getElementById("canvas");  
  379.   
  380.             if (canvas.getContext) {  
  381.                 ctx = document.getElementById("canvas").getContext("2d");  
  382.                 ctx.clearRect(0, 0, 320, 240);  
  383.   
  384.                 var img = new Image();  
  385.   
  386.                 img.src = "/static/logo.gif";  
  387.   
  388.                 img.onload = function () {  
  389.                     ctx.drawImage(img, 129, 89);  
  390.                 }  
  391.                 image = ctx.getImageData(0, 0, 320, 240);  
  392.   
  393.   
  394.             }  
  395.   
  396.             var pageSize = getPageSize();  
  397.   
  398.             jQuery("#flash").css({ height: pageSize[1] + "px" });  
  399.   
  400.         }, false);  
  401.   
  402.         window.addEventListener("resize", function () {  
  403.   
  404.             var pageSize = getPageSize();  
  405.   
  406.             jQuery("#flash").css({ height: pageSize[1] + "px" });  
  407.   
  408.         }, false);  
  409.   
  410.   
  411.         function UploadPic() {  
  412.             debugger;  
  413.             // generate the image data  
  414.             var canvas = document.getElementById("canvas");  
  415.             var dataURL = canvas.toDataURL("image/png");  
  416.   
  417.             // Sending the image data to Server  
  418.             $.ajax({  
  419.                 type: 'POST',  
  420.                 url: "baseimg.aspx",  
  421.                 data: { imgBase64: dataURL },  
  422.                 success: function () {  
  423.                     alert("Done, Picture Uploaded.");  
  424.                     window.opener.location.reload(true); // reloading Parent page  
  425.                       
  426.                     window.close();  
  427.                     window.opener.setVal(1);  
  428.   
  429.                     return false;  
  430.                 }  
  431.             });  
  432.         }  
  433.   
  434.   
  435.     script>  
  436.   
  437.   
  438.   
  439.   
  440.   
  441. body>  
  442. html>  
  1. using System;  
  2. using System.Configuration;  
  3. using System.Data;  
  4. using System.IO;  
  5. using System.Data.SqlClient;  
  6.   
  7. public partial class WebCam_baseimg : System.Web.UI.Page  
  8. {  
  9.     protected void Page_Load(object sender, EventArgs e)  
  10.     {  
  11.   
  12.         //called page form json for creating imgBase64 in image  
  13.   
  14.         StreamReader reader = new StreamReader(Request.InputStream);  
  15.         string Data = Server.UrlDecode(reader.ReadToEnd());  
  16.         reader.Close();  
  17.   
  18.         DateTime nm = DateTime.Now;  
  19.         string date = nm.ToString("yyyymmddMMss");  
  20.         //used date for creating Unique image name  
  21.   
  22.         Session["capturedImageURL"] = Server.MapPath("~/Userimages/") + date + ".jpeg";    
  23.   
  24.         Session["Imagename"] = date + ".jpeg";   
  25.         // We can use name of image where ever we required that why we are storing in Session  
  26.   
  27.         drawimg(Data.Replace("imgBase64=data:image/png;base64,", string.Empty), Session["capturedImageURL"].ToString());  
  28.         // it is method   
  29.         // passing base64 string and string filename to Draw Image.  
  30.   
  31.         insertImagePath(Session["Imagename"].ToString(), "~/Userimages/" + Session["Imagename"].ToString());  
  32.         // it is method   
  33.         //inserting image in to database   
  34.   
  35.   
  36.     }  
  37.   
  38.     public void drawimg(string base64, string filename)  // Drawing image from Base64 string.  
  39.     {  
  40.         using (FileStream fs = new FileStream(filename, FileMode.OpenOrCreate, FileAccess.Write))  
  41.         {  
  42.             using (BinaryWriter bw = new BinaryWriter(fs))  
  43.             {  
  44.                 byte[] data = Convert.FromBase64String(base64);  
  45.                 bw.Write(data);  
  46.                 bw.Close();  
  47.             }  
  48.         }  
  49.     }  
  50.   
  51.     public void insertImagePath(string imagename, string imagepath) // use for imserting image when it is created.  
  52.     {  
  53.         SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Mycon"].ToString());  
  54.   
  55.         SqlCommand cmd = new SqlCommand("Usp_InsertImageDT", con);  
  56.         cmd.CommandType = CommandType.StoredProcedure;  
  57.         cmd.Parameters.AddWithValue("@UserImagename", imagename);  
  58.         cmd.Parameters.AddWithValue("@UserImagePath", imagepath);  
  59.         cmd.Parameters.AddWithValue("@UserID", 1);  
  60.         cmd.Parameters.AddWithValue("@QueryID", 1);  
  61.         con.Open();  
  62.         cmd.ExecuteNonQuery();  
  63.         con.Close();   
  64.     }  
  65.   
  66. }  
 string Data = Server.UrlDecode(reader.ReadToEnd()) the value in this line is null.
 
 
 
Thank you for any assistance. 
Answers (1)
Next Recommended Forum