Matt Paulson

Entrepreneur, Author, Private Equity Investor
  • Facebook
  • Linkedin
  • Twitter
  • Rss
  • Blog
    • Book Recommendations
    • Church Life & Ministry
    • Community Projects
    • Entrepreneurship
    • Quaterly Updates
    • Startup Community
    • Startup Q&A Show
    • Web Development
  • About
    • Resume
  • My Companies
    • Angel Investments
  • My Books
    • Online Business from Scratch
    • Automatic Income
    • The Ten-Year Turnaround
    • Email Marketing Demystified
    • 40 Rules for Internet Business Success
  • Media Appearances
  • Contact
Home» Web Development » How to Crop Images in ASP.NET with "Web Crop Image Control"

How to Crop Images in ASP.NET with "Web Crop Image Control"

Posted on May 22, 2009 by matt in Web Development 9 Comments
Tweet

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:

crop

Tweet

Comments

9 comments on “How to Crop Images in ASP.NET with "Web Crop Image Control"”

  1. Mike says:
    May 22, 2009 at 2:38 pm

    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.

    Reply
  2. Matthew Paulson says:
    May 22, 2009 at 3:49 pm

    That CMS was…. uhhh… I would be happy to never look at it again 🙂

    Reply
  3. Tune Up Your PC » Post Topic » Cropping with ASP.Net says:
    May 22, 2009 at 2:43 pm

    […] Matthew Paulson has a quick and dirty write up on how to implement this on your page too. […]

    Reply
  4. Russian Coding 4 Fun : Обрезка с помощью ASP.Net says:
    May 27, 2009 at 1:44 am

    […] Полсон (Matthew Paulson (EN)) описал возможность реализации подобного […]

    Reply
  5. Ryan W says:
    May 27, 2009 at 8:21 am

    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.

    Reply
  6. Jennifer Overholt says:
    May 29, 2009 at 12:10 pm

    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!

    Reply
    • Matthew Paulson says:
      May 30, 2009 at 5:42 am

      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…

      Reply
  7. Stephajn Saunter says:
    June 8, 2009 at 9:15 am

    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/

    Reply
  8. kered says:
    July 27, 2010 at 3:32 am

    I keep getting invalid virtual path, which I know is a valid virtual path any ideas on how to solve this ?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Enter your email address below to receive a steady stream of tricks, tips and ideas to help you build a better and more profitable business.

Email Marketing Demystified

The second edition of Email Marketing Demystified is now available. This book teaches you how to build a massive email list, write marketing copy that converts and generate more sales in your business.

Click Here to Get Your Copy of Email Marketing Demystified

Recent Posts

  • Introducing MarketBrew, a Craft Beer from MarketBeat and Remedy Brewing Company

    April 22, 2021
  • How to Find and Pitch Investors for Your Startup

    April 13, 2021
  • My Quarterly Update: Q2 2021

    April 6, 2021
  • The Future of Seed-Stage Startup Capital in the Dakota’s

    March 31, 2021
  • Next Steps for Sioux Falls’ Startup Ecosystem

    March 16, 2021

    Follow me on Facebook & YouTube

    Contact

    • [email protected]
    • Contact Us
    • matthew-paulson
      • Facebook
      • Twitter
      • Linkedin
      • Instagram
      • Rss

    © Matthew Paulson 2003-2021. All Rights Reserved.

    Privacy Policy