Here’s how to make a basic image cropper with the “Web Crop Image Control”:
(1) Download the source code from CodePlex.
(2) Create a new ASP.NET website in Visual Studio and add the included code from the sample website, including the DLL file it self from the “bin” directory, as well as the “scripts” directory and the “css” directory..
(3) Create a new ASP.NET Page and add in the following header reference to reference the crop control:
<%@ Register assembly=”CS.WebControls.WebCropImage” namespace=”CS.WebControls” tagprefix=”cc1″ %>
(4) Add an ASP.NET Image Control to the Page:
<asp:Image ID=”Image1″ runat=”server” ImageUrl=”images/samplephoto.jpg” />
You can also set the vlaue of the image programmatically by setting the “ImageURL” property of your control.
(5) Add a Crop Button to your page and give it an event handler:
<asp:Button ID=”btnCrop” runat=”server” Text=”Crop” onclick=”btnCrop_Click” />
Your corresponding C# code would look like this:
protected void btnCrop_Click(object sender, EventArgs e)
(6) Add the Web Crop Image Control
<cc1:WebCropImage ID=”wci1″ runat=”server”
Make sure that the “CropImage” property is set to the name of the ASP.NET Image Control you created and that the CropButtonID is set to the ID of the button you created. You can change the default height and width by setting the H and W properties.
If all is well with your code, you should be good to go. Here’s what the finished product will look like: