Build a picture cropbox with pure jQuery

If you are working on a site where users create and curate their own profiles, chances are you will have to offer users the possibility of uploading their own profile pictures. There is no built-in capability within HTML or Javascript to do this. In this post, I’ll teach you how to add this functionality to your site with as little code as possible. Best of all, it only uses plain-vanilla jQuery to work.

The code here builds on top code written by Hong Khanh, called cropbox. This library is small and is very easy to extend without having to edit the source code, perfect for our use case.

Pre-requisites

  • Bootstrap (js and css)
  • Cropbox library
  • jQuery
  • AngularJS (optional)

The profile picture

By default, you want to show users their current profile picture, instead of throwing the profile picture editor on their faces right off the bat. So we will start by adding basic html elements to display the profile picture:

  • We wrap the image and the Edit button in a div container with class bg-public. We will later use this class to manipulate the visibility of the element between edit mode and non-edit mode.
  • You will want to offer only the profile owner the possibility to edit. In this case, I use the the ng-show directive of AngularJS to identify whether to show this element or not.

We overlay the “Edit” button over the image that we want to edit. We do this with CSS:

  • Make sure that the main parent element (CSS class profile-canopy, in my case) is set with position: relative. Otherwise, it will default to staticand the rest of the child elements (which use position: absolute) will not be correctly positioned. position:absolute looks for the first parent element whose position is not static (the default).
  • Add some nice formatting to your buttons, use Bootstrap is you want something beautiful and quick.

#2. The editor element

We want the editor to do these things:

  1. Let the user play with an image of his choosing.
  2. Let the user drag the image around the crop area.
  3. Zoom-in/zoom-out the image.
  4. Crop the image to a specified dimension (thus making it ready to upload to the server)

Right after the profile-canopy-bg div, add the canopy-bg-edit div, as shown below.

  • Note that the canopy-bg-edit element also has the hidden class.
  • The first child of this div, imageBox-bg, is the one we will use to display the crop tool. Also note that this div also has the CSS class profile-canopy-bg, thus it preserves the same CSS configuration as the profile image.
  • The div action is used to display the crop editing HTML elements within the crop tool.

#4. Initialising the crop tool

When the user clicks on the Edit button, three things will happen:

  • The div element that displays the profile image will be hidden.
  • The div element that holds the HTML elements for the crop tool will be displayed instead
  • The crop tool gets initialised.

All this is wired together with the following JavaScript:

The key component on this code is the initializeCropper function. This function is a wrapper I use to extend the functionality of the cropbox library without needing to edit its source. The initializeCropper function takes several arguments:

  • imageBox: this is the jQuery selector that binds to the HTML element where you need to crop tool to show and interact with.
  • thumbBox: jQuery selector that binds to an HTML element where you want the crop tool to produce thumbnails of the images cropped. I do not use this feature, so this is irrelevant in this use case described in this article.
  • imgSrc: is the URI that points to the picture you want to load in the crop tool when it initialises.
  • fileInput: jQuery selector to the <input file> HTML element (the one you use to allow the user to select another file).
  • btnxxx: jQuery selectors for the buttons used to control the crop tool actions.
  • cancelFunction: delegate function you pass on to the wrapper to be executed if the user clicks the Cancel button.
  • cropSuccessDelegate: delegate function to be executed when the user clicks on the Crop button

And that’s it! Easy, right? You bet. By building a simple wrapper on top of cropbox, we can add this great library onto our website, whatever structure it might have. Go on and try it on yourself. Here’s a JSFiddle you can use to get started.