Menu
I have successfully implemented image cropping solution with help of this article Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET. It work fine, but on page load, I want to show default cropping area. just like in below picture. I mean when page is opened that contained picture for cropping, it show default coordinates, however, user can edit these one.
I want to highlight 100x100 coordinates.
This is a closed solution http://jsfiddle.net/kLbVM/3/ In this example, when we click on button it highlights the coordinate, but I need the same thing, when page is loaded.
I am looking for same thing, just like in linkedin.com
Edit: Here is my page source...
<head runat="server">
<style>
#imgProfileImage
{
width: auto;
height: auto;
}
.jcrop-handle
{
background-color: #333;
border: 1px #eee solid;
font-size: 1px;
width: 7px;
height: 7px;
}
</style>
<link href="css/jquery.Jcrop.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.Jcrop.pack.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Image ID="imgProfileImage" runat="server" width="400px" height="400px" />
<asp:HiddenField ID="X" runat="server" />
<asp:HiddenField ID="Y" runat="server" />
<asp:HiddenField ID="W" runat="server" />
<asp:HiddenField ID="H" runat="server" />
<br />
<asp:Button ID="btnCrop" runat="server" Text="Crop Picture" CssClass="accentheader"
OnClick="btnCrop_Click" />
</div>
</form>
<script type="text/javascript">
jQuery(document).ready(function () {
var jcrop_api;
jcrop_api = $.Jcrop('#imgProfileImage');
jcrop_api.setSelect([0, 0, 100, 100]);
jcrop_api.enable();
jQuery('#imgProfileImage').Jcrop({
onSelect: storeCoords
});
});
function storeCoords(c) {
jQuery('#X').val(c.x);
jQuery('#Y').val(c.y);
jQuery('#W').val(c.w);
jQuery('#H').val(c.h);
};
Now its....
476
Try these steps:
When you do 'Jcrop(element)', element should be an img, not a div or any other tag, so move your id="cropbox" attribute from div to img:
<div >
<!-- |________ -->
<!-- | -->
<img id="cropbox" src="..." />
</div>
Specify width and height on .jcrop-handle class:
.jcrop-handle{
background-color:#333;
border:1px #eee solid;
font-size:1px;
width:7px; //explicit width
height:7px; //explicit height
}
Enable resizing 'interactivity' handlers after setSelection:
jcrop_api.setSelect([0,0,100,100]); //default selection on page load
jcrop_api.enable(); //enable resize interactivity
Live demo
117
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
