Hello all,
I need to take a picture using the camera of the user app (PC or mobile) and save it to the database.
What I need is to save the path of the picture to the database, with some other textbox's to identify the request made.
I use the following aspx as design:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="WebCam.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#webcam');
$("#btnCapture").click(function () {
Webcam.snap(function (data_uri) {
$("#CenasPic")[0].src = data_uri;
$("#btnUpload").removeAttr("disabled");
});
});
$("#btnUpload").click(function () {
$.ajax({
type: "POST",
url: "CS.aspx/SaveCapturedImage",
data: "{data: '" + $("#CenasPic")[0].src + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) { }
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server">50514</asp:TextBox>
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<th align="center"><u>Live Camera</u></th>
<th align="center"><u>Captured Picture</u></th>
</tr>
<tr>
<td>
<div id="webcam"></div>
</td>
<td>
<img id="imgCapture" /></td>
</tr>
<tr>
<td align="center">
<input type="button" id="btnCapture" value="Capture" />
</td>
<td align="center">
<input type="button" id="btnUpload" value="Upload" disabled="disabled" />
</td>
</tr>
</table>
<asp:Image ID="CenasPic" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>
and the following aspx.cs to save it:
[WebMethod()]
public static bool SaveCapturedImage(string data)
{
string fileName = DateTime.Now.ToString("dd-MM-yy hh-mm-ss");
//Convert Base64 Encoded string to Byte Array.
byte[] imageBytes = Convert.FromBase64String(data.Split(',')[1]);
//Save the Byte Array as Image File.
string filePath = HttpContext.Current.Server.MapPath(string.Format("~/Captures/{0}.jpg", fileName));
File.WriteAllBytes(filePath, imageBytes);
return true;
}
Can anyone help me performing this?
Best regards,
RL
