i have created popup page to capture crop and upload image to parent page everything is working fine but after cropped image upload on parent page it display on parent page image control. but its value showing null while save in database. i have use jQuery for this.
my code as below.
parent page
<script src="ScriptFiles/jquery-1.8.3.min.js"></script>
<script src="ScriptFiles/WebCam.js"></script>
<script src="ScriptFiles/jquery-1.10.2.min.js"></script>
<script src="ScriptFiles/Jcrop.min.js"></script>
<link href="ScriptFiles/Jcrop.css" rel="stylesheet" />
<script src="Bootstrap/3.4.1/bootstrap.min.js"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="Bootstrap/css/style.css" rel="stylesheet" />
<script>
function myFunction() {
var url = "/captureimage.aspx";
var s = window.open(url, 'popup_window', 'width=900,height=500,left=200,top=100,resizable=no');
ClientScript.RegisterStartupScript(this.GetType(), "script", s, true);
}
function SetSource(src) {
document.getElementById("vImage").src = src;
//document.getElementById("vimagehidden").value = src;
}
</script>
<div class="col-md-12" style="padding-top: 10px; padding-right: 10px;">
<table class="mx-auto">
<tr>
<th>Name</th>
<th>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox></th>
<th rowspan="6">
<table>
<tr>
<td class="text-center" style="padding: 0px;">
<asp:Image ID="vImage" runat="server" CssClass="border" Width="110px" Height="140px" /><br />
<br />
<asp:Button ID="btnPhoto" runat="server" Text="Photo" CssClass="btn btn-success" OnClientClick="return myFunction();" />
</td>
</tr>
</table>
</th>
</tr>
<tr>
<th>Mobile No</th>
<th>
<asp:TextBox ID="txtContact" runat="server" TabIndex="2"></asp:TextBox></th>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="btnSubmit" CssClass="btn btn-danger" runat="server" Text="Submit" OnClick="btnSubmit_Click" TabIndex="4" />
<asp:Button ID="btnReset" CssClass="btn btn-danger" runat="server" Text="Reset" TabIndex="5" />
</td>
</tr>
</table>
</div>
<div style="float: right;">
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />
</div>
<asp:HiddenField ID="string_hidden" runat="server" />
<asp:HiddenField ID="vimagehidden" runat="server" />
<asp:HiddenField ID="txtconformmessageValue" runat="server" />
</form>
<script src="Bootstrap/js/jquery-3.5.1.min.js"></script>
<script src="Assets/js/bootstrap.js"></script>
<script src="Assets/js/bootstrap.min.js"></script>
parent page image and record save code
if (!string.IsNullOrEmpty(imgCapture.ImageUrl))
{
string filePath = Server.MapPath(imgCapture.ImageUrl);
FileStream fs = new FileStream(filePath, FileMode.Open, FileAccess.ReadWrite);
BinaryReader br = new BinaryReader(fs);
Byte[] bytes = br.ReadBytes((Int32)fs.Length);
br.Close();
fs.Close();
SqlConnection con = new SqlConnection(@"conne string");
//insert the file into database
string strQuery = "INSERT INTO empDetails(name,mono,vimage) VALUES (@name,@mono, @vimage)";
SqlCommand cmd = new SqlCommand(strQuery, con);
cmd.Parameters.AddWithValue("@name", txtName.Text.ToUpper());
cmd.Parameters.AddWithValue("@mono", txtContact.Text.ToUpper());
cmd.Parameters.Add("@vimage", SqlDbType.Binary).Value = bytes;
con.Open();
cmd.ExecuteNonQuery();
Response.Write("<script>alert('Record Saved !')</script>");
txtName.Text = "";
txtContact.Text = "";
imgCapture.ImageUrl = "";
con.Close();
}
else
{
Response.Write("<script>alert('Capture Image!')</script>");
}
popup (child) page code
<script src="Bootstrap/3.4.1/bootstrap.min.js"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="Assets/Style/Style.css" rel="stylesheet" />
<script src="ScriptFiles/jquery-1.8.3.min.js"></script>
<script src="ScriptFiles/WebCam.js"></script>
<script src="ScriptFiles/jquery-1.10.2.min.js"></script>
<script src="ScriptFiles/Jcrop.min.js"></script>
<link href="ScriptFiles/Jcrop.css" rel="stylesheet" />
<%-- Image Capture Code --%>
<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) {
$("#imgCapture")[0].src = data_uri;
$("#btnUpload").removeAttr("disabled");
});
});
$("#btnCapture").click(function () {
$.ajax({
type: "POST",
url: "captureimage.aspx/SaveCapturedImage",
data: "{data: '" + $("#imgCapture")[0].src + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json"
});
});
});
</script>
<%-- Image Crop Code --%>
<script>
$(document).ready(function () {
$('#<%= imgCapture.ClientID%>').Jcrop({
onSelect: SelectCropArea
});
});
function SelectCropArea(c) {
$('#<%=X.ClientID%>').val(parseInt(c.x));
$('#<%=Y.ClientID%>').val(parseInt(c.y));
$('#<%=W.ClientID%>').val(parseInt(c.w));
$('#<%=H.ClientID%>').val(parseInt(c.h));
}
</script>
<script type="text/javascript">
function passDetails() {
if (window.opener != null && !window.opener.closed) {
//alert('begin');
var vImage = window.opener.document.getElementById("vImage");
//vImage.value = document.getElementById("imgCapture").src.value;
vImage.value = window.opener.SetSource(document.getElementById("imgCapture").src);
}
window.close();
}
</script>
<table border="0" align="center">
<tr>
<th align="center" style="background-color: #3A9AD9; color: #ffffff; font-family: Century; font-size: 18px;">Live Camera</th>
<th align="center" style="background-color: #3A9AD9; color: #ffffff; font-family: Century; font-size: 18px;">Captured Picture </th>
</tr>
<tr>
<td>
<div id="webcam"></div>
</td>
<td>
<asp:Image ID="imgCapture" runat="server" />
</td>
</tr>
<tr>
<td colspan="2" align="center" class="mainbgcolor2">
<input type="button" id="btnCapture" value="Capture" class="btn btn-danger" />
<%--<asp:Button ID="btnCapture" runat="server" Text="Capture" CssClass="buttondesign" OnClick="btnCapture_Click1" />--%>
<asp:Button ID="btnCrop" runat="server" Text="Crop" CssClass="btn btn-danger" OnClick="btnCrop_Click" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" CssClass="btn btn-danger" OnClientClick="passDetails();" />
<asp:Button ID="btnSubmit" runat="server" Text="Save" CssClass="btn btn-danger" OnClick="btnSubmit_Click" />
</td>
</tr>
<tr>
<td colspan="2" class="auto-style1">
<asp:Label ID="lblerror" runat="server" Text="lblerror" Visible="False" ForeColor="#FF3300"></asp:Label>
</td>
</tr>
<tr>
<td>Name
<asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Contact
<asp:TextBox ID="txtContact" runat="server"></asp:TextBox></td>
</tr>
</table>
<div style="float: right;">
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />
</div>
c# code behind for capture image popup page
[WebMethod()]
public static bool SaveCapturedImage(string data)
{
string fileName = DateTime.Now.ToString("dd-MM-yy");
byte[] imageBytes = Convert.FromBase64String(data.Split(',')[1]);
//Save the Byte Array as Image File.
string filePath = HttpContext.Current.Server.MapPath(string.Format("~/Captured/{0}.jpg", fileName));
File.WriteAllBytes(filePath, imageBytes);
return true;
}
image croping code
try
{
string filePath = Path.Combine("Captured");
int x = Convert.ToInt32(X.Value);
int y = Convert.ToInt32(Y.Value);
int w = Convert.ToInt32(W.Value);
int h = Convert.ToInt32(H.Value);
System.Drawing.Image image = Bitmap.FromFile(HttpContext.Current.Request.PhysicalApplicationPath + @"\Captured\" + DateTime.Now.ToString("dd-MM-yy") + ".jpg");
Bitmap bmp = new Bitmap(w, h, image.PixelFormat);
Graphics g = Graphics.FromImage(bmp);
g.DrawImage(image, new Rectangle(0, 0, w, h), new Rectangle(x, y, w, h), GraphicsUnit.Pixel);
bmp.Save(HttpContext.Current.Request.PhysicalApplicationPath + @"\CroppedImage\"+ DateTime.Now.ToString("dd-MM-yy") + ".jpg", image.RawFormat);
imgCapture.ImageUrl = @"\CroppedImage\" + DateTime.Now.ToString("dd-MM-yy") + ".jpg";
}
catch (Exception ex)
{
Response.Write("<script>alert('" + ex + "')</script>");
}
