<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);
}
can you provide me the source code with the document?
ReplyDelete