When researching various web-based imaging cropping tools, I’ve found that there are a lot of good looking JQuery, MooTools, and other JavaScript based solutions out there, but there’s not a ton of good server-side support. The one ASP.NET control I found that I really did like was “Asp.net 2.0 Web Crop Image Control“. It’s actually an ASP.NET wrapper around JQuery JCrop.
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)
{
wci1.Crop(Server.MapPath(“~/images/filename.jpg”));
}
(6) Add the Web Crop Image Control
<cc1:WebCropImage ID=”wci1″ runat=”server”
CropImage=”Image1″
IncludeJQuery=”true”
ScriptPath=”scripts/”
W=”50″
H=”150″ CropButtonID=”btnCrop”
/>
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:
