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);
}
Subscribe to:
Posts
(
Atom
)
