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:
I made a valiant attempt at this one on the CMS, but ended up cutting it out due to time… Someday I will revive this project.
That CMS was…. uhhh… I would be happy to never look at it again 🙂
[…] Matthew Paulson has a quick and dirty write up on how to implement this on your page too. […]
[…] Полсон (Matthew Paulson (EN)) описал возможность реализации подобного […]
Looking through this article, I noticed the IncludeJquery parameter as well as the discussion about the asp.net wrapper. That reminded me of another interesting jquery plugin I encountered at http://www.pixastic.com/editor-test/.
I am considering implementing it although I need to test it more before then, seems to have odd behavior in FF if you click on the reshape, effects, etc buttons at the top right.
I want to do exactly what your demo does… HOWEVER, the difference is, when the user uploads an image, it will be a FULL high res, i.e 2816*1880. How can I serve up a smaller version for web view to the user, have them crop that with this tool, then apply those changes back to the full size image? OR does the tool already do that? THANKS in advance! DESPERATE to find an answer before spending tons of money on a 3rd party tool!
Hi Jennifer, you definitely want to resize the images in ASP.NET after cropping them. I recommend taking the cropped image after you create it and resize it to whatever you'd like using ASP.NET's built in image resizing tools. I don't think there's anything built into the cropping control that will necessarily be of great help.
This link on codeplex should help: http://www.codeproject.com/KB/web-image/pngupload…
Hi Jennifer,
I found a tool called the Better Image Processor that allows you to set a max width and/ or a max height property so that the image displayed will be dynamically resized. I'm not sure if it maintains the entire quality of the image as it does this check it out at http://www.waterwijkers.nl/bip/
I keep getting invalid virtual path, which I know is a valid virtual path any ideas on how to solve this ?