How to Image Captured from Webcam and Crop it Update to Server(Asp.net) using JQuery
<link rel="stylesheet" href="<%=ResolveUrl("~/Scripts/plugins/Crop/css/font-awesome.min.css") %>"> <link href="<%=ResolveUrl("~/Scripts/plugins/Crop/css/cropper.css") %>" rel="stylesheet" /> <script type="text/javascript"> var pageUrl = '<%=ResolveUrl("~/Search/WebcamCaptured.aspx/GetCapturedImage") %>'; $(function () { jQuery("#webcam").webcam({ width: 320, height: 240, mode: "save", swffile: '<%=ResolveUrl("~/Scripts/plugins/Webcam_Plugin/jscam.swf") %>', debug: function (type, status) { //$('#camStatus').append(type + ": " + status + '<br /><br />'); }, onSave: function (data) { $.ajax({ type: "POST", url: pageUrl, data: '', contentType: "application/json; charset=utf-8", dataType: "json", success: function (r) { //$("[id*=imgCapture]").css("visibility", "visible"); //$("[id*=imgCapture]").attr("src", r.d); $("[id*=image]").attr("src", ""); $("[id*=image]").attr("src", r.d); $(".cropper-canvas").each(function () { $(this).children('img').attr('src', r.d); }); $(".cropper-view-box").each(function () { $(this).children('img').attr('src', r.d); }); $(".img-preview").each(function () { $(this).children('img').attr('src', r.d); }); }, failure: function (response) { alert(response.d); } }); }, onCapture: function () { webcam.save(pageUrl); } }); }); function Capture() { webcam.capture(); return false; } </script> <section class="content"> <div class="box box-info"> <div class="box-header with-border"> <h3 class="box-title">Live Webcam</h3> </div> <!-- /.box-header --> <div class="box-body"> <div class="row"> <div class="col-sm-6 col-sm-offset-3" > <div id="webcam"> </div> </div> </div> <!-- /.row --> </div> <!-- /.box-body --> <div class="box-footer"> <asp:Label ID="lblError" runat="server"></asp:Label> <asp:Button ID="btnCapture" Text="Capture" runat="server" OnClientClick="return Capture();" CssClass="btn btn-primary pull-right"/> </div> </div> <div class="box box-default"> <div class="box-header with-border"> <h3 class="box-title">Croping tool</h3> </div> <div class="box-body"> <div class="row"> <div class="col-md-9"> <!-- <h3 class="page-header">Demo:</h3> --> <div class="img-container"> <asp:Image ID="image" runat="server" ClientIDMode="Static" CssClass="img-rounded" Style=" width: 320px; height: 240px" /> </div> </div> <div class="col-md-3"> <!-- <h3 class="page-header">Preview:</h3> --> <div class="docs-preview clearfix"> <div class="img-preview preview-lg"></div> </div> <!-- <h3 class="page-header">Data:</h3> --> <div class="docs-data"> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataX">X</label> <input type="text" class="form-control" id="dataX" placeholder="x"> <span class="input-group-addon">px</span> <br /> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataY">Y</label> <input type="text" class="form-control" id="dataY" placeholder="y"> <span class="input-group-addon">px</span> <br /> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataWidth">Width</label> <input type="text" class="form-control" id="dataWidth" placeholder="width"> <span class="input-group-addon">px</span> <br /> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataHeight">Height</label> <input type="text" class="form-control" id="dataHeight" placeholder="height"> <span class="input-group-addon">px</span> <br /> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataRotate">Rotate</label> <input type="text" class="form-control" id="dataRotate" placeholder="rotate"> <span class="input-group-addon">deg</span> <br /> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataScaleX">ScaleX</label> <input type="text" class="form-control" id="dataScaleX" placeholder="scaleX"> <br /> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataScaleY">ScaleY</label> <input type="text" class="form-control" id="dataScaleY" placeholder="scaleY"> <br /> </div> </div> </div> </div> <div class="row"> <div class="col-md-9 docs-buttons"> <!-- <h3 class="page-header">Toolbar:</h3> --> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="Move"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setDragMode", "move")"> <span class="fa fa-arrows"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="Crop"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setDragMode", "crop")"> <span class="fa fa-crop"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("zoom", 0.1)"> <span class="fa fa-search-plus"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("zoom", -0.1)"> <span class="fa fa-search-minus"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("move", -10, 0)"> <span class="fa fa-arrow-left"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("move", 10, 0)"> <span class="fa fa-arrow-right"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("move", 0, -10)"> <span class="fa fa-arrow-up"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("move", 0, 10)"> <span class="fa fa-arrow-down"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("rotate", -45)"> <span class="fa fa-rotate-left"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("rotate", 45)"> <span class="fa fa-rotate-right"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("scaleX", -1)"> <span class="fa fa-arrows-h"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("scaleY"-1)"> <span class="fa fa-arrows-v"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="crop" title="Crop"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("crop")"> <span class="fa fa-check"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="clear" title="Clear"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("clear")"> <span class="fa fa-remove"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="disable" title="Disable"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("disable")"> <span class="fa fa-lock"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="enable" title="Enable"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("enable")"> <span class="fa fa-unlock"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="reset" title="Reset"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("reset")"> <span class="fa fa-refresh"></span> </span> </button> </div> <div class="btn-group btn-group-crop"> <button id="Button1" type="button" class="btn btn-primary" data-method="getCroppedCanvas" runat="server"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas")"> Get Cropped Canvas </span> </button> </div> <!-- Show the cropped image in modal --> <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4> </div> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a> <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" class="btn btn-primary"/> </div> </div> </div> </div><!-- /.modal --> </div><!-- /.docs-buttons --> <div class="col-md-3 docs-toggles"> <!-- <h3 class="page-header">Toggles:</h3> --> <div class="btn-group btn-group-justified" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 16 / 9"> 16:9 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 4 / 3"> 4:3 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 1 / 1"> 1:1 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 2 / 3"> 2:3 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: NaN"> Free </span> </label> </div> <input name="imgCropped" id="imgCropped" type="hidden" /> </div><!-- /.dropdown --> </div><!-- /.docs-toggles --> </div> <!-- /.row --> </div> <!-- /.box-body --> </section> <script type="text/javascript" src="<%=ResolveUrl("~/Scripts/plugins/Crop/js/cropper.js") %>"></script> <script type="text/javascript" src="<%=ResolveUrl("~/Scripts/plugins/Crop/js/main.js") %>"></script>
public string appno = "";
double Qryid = 0;
public string imageName = "";
public string mySPIc = "";
public string pathS = "";
public string pathO = "";
public string imagePath = "";
public string myUrl = MyConnectionString.DomainUrl;
protected void Page_Load(object sender, System.EventArgs e)
{
lblError.Visible = false;
try
{
string myUId = RouteData.Values["UId"] as string;
string myImageName = RouteData.Values["ImageName"] as string;
if ((Session["UserID"] == null) || ((int)Session["UserID"] == 0) || (Session["BusinessID"] == null) || ((int)Session["BusinessID"] == 0))
{
ClientScript.RegisterStartupScript(typeof(Page), "closePage", "window.close();", true);
return;
}
if (myUId != null && !string.IsNullOrEmpty(myUId))
{
Qryid = Convert.ToDouble(myUId);
if (Qryid == 0 || string.IsNullOrEmpty(myImageName))
{
ClientScript.RegisterStartupScript(typeof(Page), "closePage", "window.close();", true);
return;
}
else
{
Session["qryid"] = Qryid;
Session["ImageName"] = myImageName;
image.ImageUrl = myUrl+"Scripts/dist/img/No_image_available.png";
}
}
if (!this.IsPostBack)
{
if (Request.InputStream.Length > 0)
{
using (StreamReader reader = new StreamReader(Request.InputStream))
{
string hexString = Server.UrlEncode(reader.ReadToEnd());
GetPathPIC();
File.WriteAllBytes(Server.MapPath(imagePath), clsCommon.ConvertHexToBytes(hexString));
System.Drawing.Image img2 = System.Drawing.Image.FromFile(pathO + mySPIc);
System.Drawing.Image bmp2 = img2.GetThumbnailImage(50, 50, null, IntPtr.Zero);
img2.Dispose();
bmp2.Save(pathS + mySPIc);
bmp2.Dispose();
System.Drawing.Image imgP = System.Drawing.Image.FromFile(pathO + mySPIc);
System.Drawing.Image bmpP = imgP.GetThumbnailImage(188, 255, null, IntPtr.Zero);
imgP.Dispose();
bmpP.Save(pathO + mySPIc);
bmpP.Dispose();
SaveWebcamPIC();
Session["CapturedImage"] = ResolveUrl(imagePath + "?" + DateTime.Now.Ticks.ToString());
}
}
}
}
catch (Exception ex)
{
lblError.Visible = true;
lblError.CssClass = "btn btn-danger";
lblError.Text = ex.Message.ToString();
}
}
[WebMethod(EnableSession = true)]
public static string GetCapturedImage()
{
string url = HttpContext.Current.Session["CapturedImage"].ToString();
HttpContext.Current.Session["CapturedImage"] = null;
return url;
}
protected void Upload(object sender, EventArgs e)
{
string base64 = Request.Form["imgCropped"];
byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);
GetPathPIC();
using (System.IO.FileStream stream = new System.IO.FileStream(Server.MapPath(imagePath), System.IO.FileMode.Create))
{
stream.Write(bytes, 0, bytes.Length);
stream.Flush();
}
System.Drawing.Image img1 = System.Drawing.Image.FromFile(pathO + mySPIc);
System.Drawing.Image bmp1 = img1.GetThumbnailImage(50, 50, null, IntPtr.Zero);
img1.Dispose();
bmp1.Save(pathS + mySPIc);
bmp1.Dispose();
System.Drawing.Image imgN = System.Drawing.Image.FromFile(pathO + mySPIc);
System.Drawing.Image bmpN = imgN.GetThumbnailImage(188, 255, null, IntPtr.Zero);
imgN.Dispose();
bmpN.Save(pathO + mySPIc);
bmpN.Dispose();
SaveWebcamPIC();
HttpContext.Current.Session["CapturedImage"] = null;
HttpContext.Current.Session["qryid"] = null;
HttpContext.Current.Session["ImageName"] = null;
ClientScript.RegisterStartupScript(typeof(Page), "closePage", "opener.document.getElementById('btnEdit').click();window.close();", true);
}
how to clear browser cache in asp.net when Image is changed in ASP.Net
By default browsers cache images using their names hence when the image is replaced on server with same name the changes are not reflected in browser unless the cache is cleared.
C#
Image1.ImageUrl = "~/images/myImage.jpg?" + DateTime.Now.Ticks.ToString();
VB.Net
Image1.ImageUrl = "~/images/myImage.jpg?" + DateTime.Now.Ticks.ToString()
Subscribe to:
Posts
(
Atom
)
