- Create a new project.
- Download WebCam.rar folder through this link and add it to the project.
- Add an empty folder named "UserImages".
- Add two web forms as "WebForm1.aspx" and "Image.aspx".
- Add an image control and a button to WebForm1.aspx like this.
<div style="width: 480px">
<asp:Image ID="ImgPrv" runat="server" Width="480px" Height="360px" />
</div><div style="text-align: center; width: 480px">
<asp:Button ID="btnCapture" runat="server" Text="Capture Image" Height="30px" Width="120px" OnClick="btnCapture_Click" />
</div>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string imageid = "1";
if (Session["ImageId"] != null)
{
imageid = Session["ImageId"].ToString();
}
ImgPrv.ImageUrl = "Image.aspx?ImageID=" + imageid + "";
}
}
protected void btnCapture_Click(object sender, EventArgs e)
{
string url = "/WebCam/Captureimage.aspx";
string s = "window.open('" + url + "', 'popup_window', 'width=900,height=460,left=100,top=100,resizable=no');";
ClientScript.RegisterStartupScript(this.GetType(), "script", s, true);
}
- Change the baseimg.aspx contents of the code behind file as follows.
protected void Page_Load(object sender, EventArgs e)
{
try
{
//called page form json for creating imgBase64 in image
StreamReader reader = new StreamReader(Request.InputStream);
String Data = Server.UrlDecode(reader.ReadToEnd());
reader.Close();
DateTime nm = DateTime.Now;
string date = nm.ToString("yyyymmddMMss");
//used date for creating Unique image name
string filename = date + ".jpg";
Session["capturedImageURL"] = Server.MapPath("~/Userimages/") + date + ".jpg";
Session["Imagename"] = date + ".jpg";
// We can use name of image where ever we required that why we are storing in Session
drawimg(Data.Replace("imgBase64=data:image/png;base64,", String.Empty), Session["capturedImageURL"].ToString());//To save image within UserImages folder
// it is method
// passing base64 string and string filename to Draw Image.
Session["ImageId"] = imageUpload(filename).ToString();
System.IO.File.Delete(Server.MapPath("~/Userimages/") + filename);//To delete the image from folder after saving in the database
}
catch (Exception ex)
{
leave.WriteLog(ex.Message, "WebCam_baseimg- Page_Load");
}
}
public void drawimg(string base64, string filename) // Drawing image from Base64 string.
{
using (FileStream fs = new FileStream(filename, FileMode.OpenOrCreate, FileAccess.Write))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(base64);
bw.Write(data);
bw.Close();
}
}
}
private int imageUpload(string filename)
{
int imageId = 1;
try
{
StreamReader reader = new StreamReader(Request.InputStream);
String Data = Server.UrlDecode(reader.ReadToEnd());
reader.Close();
string filePath = Server.MapPath("~/Userimages/") + filename;
string ext = Path.GetExtension(filename);
ext = ext.ToLower();
string contenttype = String.Empty;
switch (ext)
{
case ".jpg":
contenttype = "image/jpg";
break;
case ".png":
contenttype = "image/png";
break;
case ".gif":
contenttype = "image/gif";
break;
default:
break;
}
if (contenttype != String.Empty)
{
byte[] bytes;
using (var webClient = new WebClient())
{
bytes = webClient.DownloadData(filePath);
}
string empId = Session["EmpId"].ToString();
imageId = imageService.uploadImage(filename, contenttype, bytes, empId);
}
return imageId;
}
catch (Exception ex)
{
leave.WriteLog(ex.Message, "WebCam_baseimg- Page_Load");
return imageId;
}
}
- Add this code inside the Page_Load method of the image.aspx
if (Request.QueryString["ImageID"] != null)
{
try
{
DataTable dt = imageService.retrieveImage(Convert.ToInt32(Request.QueryString["ImageID"]));
if (dt.Rows.Count > 0)
{
byte[] bytes = (byte[])dt.Rows[0]["Data"];
Response.Buffer = true;
Response.Charset = "";
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.ContentType = dt.Rows[0]["ContentType"].ToString();
Response.AddHeader("content-disposition", "attachment;filename=" + dt.Rows[0]["Name"].ToString());
Response.BinaryWrite(bytes);
Response.Flush();
Response.End();
}
}
catch (Exception ex)
{
throw ex;
}
}
retrieveImage method Query
select Name,ContentType,Data from Image where Id='" + imageId + "'
WebForm1.aspx
- After clicking Capture Image button it opens a popup window.
- After submitting the captured image, it shows the preview within WebForm1.aspx page.