Implement Cropping Feature on Your Website in Under 10 Min | Cropper.js

Cropper.js is the JavaScript version of the jQuery Image Cropper plugin which provides the feature-rich image cropping functionality on any image.

In this article, we will be looking at how we can implement the cropper.js plugin on a very basic website, such that when the users inputs an image on the HTML form, they will be prompted with a view to crop that image first, and after successful cropping, the original image in the form will gets replaced by the cropped image, post which they can submit their form.

Final Project Demo:

Note: For the demonstration purpose of this article, the sample project is implemented using Django Framework as backend, but the readers having their project implemented using any other framework or tech stack can also follow along, as the core implementations details of this plugin relies on just using the basic HTML, CSS and JS.

Let’s Get Started

We will be building a very basic project as shown above , where any user can post its profile details(Name, Email and Profile Pic) on a form, and after uploading the profile pic, the cropping view feature will be shown and after cropping the image the user can post its updated profile with cropped image as input.

Note: Readers having their projects already implemented using some other frameworks or technologies and are just looking on how to integrate cropping feature in their website, then they can directly jump and continue from Step 6.2.

Making the Django Application

Step 1: Installing Essential Libraries

• Create and activate your virtual environment, and install the following libraries using,

$ pip install django
$ pip install django-crispy-forms
$ pip install Pillow

• django-crispy-forms is a library that allows us to easily style our forms on the Frontend.
• Pillow library is required to handle the images received in our database model

Step 2: Setting up Django Project

• Let’s first create our django project that will consist of all the various apps and modules of the website.
• Open up your console and start a new project in your working directory using,

$ django-admin startproject mysite

• After this, go into your newly created project folder “mysite” and from there, start a new app using,

$ python manage.py startapp user
# user is the app name 

• After this your working project folder(mysite) structure must look something like this,

• Now inside your mysite/mysite folder open up your settings.py file and in the INSTALLED_APPS list add our user app name and the crispy-form library name, so that django can access them while running, ,

Step 3: Creating Database Model

• Now inside the mysite/user/models.py file, we’ll define our database schema which will consist of a table named Profile having name, email, datePosted and profileImage as columns,

• upload_to= “profile_pics” parameter will make all the images received in this model get stored into the folder named profile_pics.
• Now commit this Profile table into our default sqlite3 database(mentioned in settings.py), by using these commands,

$ python manage.py makemigrations
$ python manage.py migrate

Step 4: Creating Profile Form

• In Django we can easily tie up the form where the user will upload data on frontend to the Database Model.
• Inside the mysite/user/ folder, create a file named “forms.py” and inside that add the following code which will link the Profile Database Model with the Profile Form.

Step 5: Creating Views and URL’s

• In this step we will define our backend logic for the home page of the website, like what will happen when a user uploads some data and what data will be passed to the home page to display it on the frontend.
• Inside the mysite/user/views.py file add the following code that will handle all the incoming URL requests of our website.

• index is the function that will be called when the user visits the home url.
• user/home.html file will be returned as a rendered HTML page when the GET request is being made by the browser at home url. Will create this file in the next step.
• Now let’s write the code to connect the home page url with this index function, in the mysite/mysite/urls.py add the following code,

Step 6.1: Creating the Frontend — home.html

• This will be the final step of the process where we will write the Frontend HTML, CSS and JS code, which includes the logic of how the form will be displayed on the home page and how to integrate the cropper.js plugin inside it.
• Inside the mysite/user/ create a folder named templates having a subfolder named user which will consist of the file named home.html.
• After this your user app folder structure must look something like this,

-user
  -admin.py
  -app.py
  -forms.py
  -models.py
  -tests.py
  -views.py
  -__init__.py
  -migrations
  -templates
    -user
      -home.html

• Open the home.html file and add the following code which will display the form to post the details and a list of all posts made yet,

• Line 1: Imported the crispy forms library
• Line 8: Added bootstrap stylesheet
• Line 17: Defined the form tag that will hold the form passed from views.py
• Line 21: Used our form parameter passed from view.py file along with crispy filter that will automatically add some CSS styling to our form.
• Line 23: A submit type button which when clicked submits the form data with a POST request back to our index function.
• Line 26: We iterate through the posts list variable that consist of all the posts objects fetched from our Profile Database in views.py file.

Step 6.2: Creating the Frontend — home.html

• For readers who have their own projects implemented using different frameworks and have came directly onto this step, let’s understand with a very basic example on how we can implement cropper.js in our templates.
• Let’s consider we have an HTML template named “home.html” in which there’s a form with fields as name, email and image to post like shown below,

• This is a very basic form in which when a user uploads some data and clicks the post button then that data will get passed into the backend.

Step 7: Implementing Cropping Feature

• Now we will add the cropping feature using cropper.js, such that before submitting a post a popup to crop the image will be shown.

Inside your home.html make the following changes,

• In the head tag section import these cropper.css and cropper.js files,

• Now add a div element with id as “image-box” and class as “image-container” above the submit button which will be container for the view of cropper.js plugin view and also add a crop button above it that will be used to replace the original image inside the form with the cropped image onclick.

• Now under the closing main tag(</main>), add the script tag which will hold all the logic on how to implement cropper.js plugin and how to replace original image with the cropped image.

• And with this we are done! Now whenever a user uploads any image, they will be prompted with a option to crop the image first and then after cropping it, when they clicks the crop button then the original image in the form will gets replaced by the cropped image and user can submit the post as usual.

Note: If you want to provide some CSS styling to this cropper plugin library, then you can also use their cropper.css and cropper.js files available for download at their official GitHub repo instead of using these CDNs.

• Run your website using,

$ python manage.py runserver
# Your website will be serving locally at http://127.0.0.1:8000/

Conclusions

• And with this, we had made a very basic Django Application with a crop functionality integrated in it using cropper.js plugin, such that a user can crop and replace the original image in the form with the cropped image.
• Feel free to ask your queries or doubts regarding this article in the Comments Section.
• Connect with me on LinkedIn.
• GitHub Repo for this project: https://github.com/RG2021/mysite