Geek Answers Handbook

How to show cropped area

I have successfully implemented the cropping solution using this article Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET . It works fine, but when loading the page I want to show the default crop area. as shown in the picture below. I mean, when a page containing an image for cropping is opened, it shows the default coordinates, however, the user can edit them.

I want to select the coordinates 100x100.

This is a closed solution http://jsfiddle.net/kLbVM/3/ In this example, when we click the button, it highlights the coordinate, but I need the same thing when the page is loaded.

I am looking for the same thing as in linkedin.com

enter image description here

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(cx); jQuery('#Y').val(cy); jQuery('#W').val(cw); jQuery('#H').val(ch); };

Now its .... enter image description here

+4
source share
3 answers

Try the following:

  • When you execute ' Jcrop(element) ', the element must be 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 in the .jcrop-handle class:

     .jcrop-handle{ background-color:#333; border:1px #eee solid; font-size:1px; width:7px; //explicit width height:7px; //explicit height }

  • Allow resizing of interactive handlers after setSelect ion:

      jcrop_api.setSelect([0,0,100,100]); //default selection on page load jcrop_api.enable(); //enable resize interactivity

Live demo

+8
source

http://jsfiddle.net/kLbVM/4/

So you want it to set default sizes when the page loads.

 $(function(){ jcrop_api.setSelect(getDimensions()); });
+2
source

Put the code in the “Displayed” form event, and it will do what you need. Assuming you are using a .Net form to display the page. I think there is an event that is raised after the document has finished loading, which you can use to enter the code if you need to first download the page from the Internet.

In any case, and regardless of the real platform, since the code works in the event (click of a button), it will work in the corresponding Form / Document event after it has been loaded and is displayed before, It will not work in the "Download" event.

0
source

More articles:


All Articles