How To Add Image Cropping Features using Django-Image-Cropping App Jcrop

by Nasir Ahangar

If you want a quick and simple way to integrate image cropping into your web application, you should try Django image crop app.  Django-image-cropping is an app for cropping uploaded images via Django’s admin back end using JavaScript Jcrop. It provides a simple and clean code that can easily integrate image cropping features into your web based application.

Jcrop keeps the original image intact; only cropping when the image is being displayed. Large images are presented in a small format, so even very big images can be easily cropped.

It provides the necessary fields, widgets and a (easy_thumbnails) thumbnail processor for displaying the cropped image in your templates. Here are some steps to get this running:

    1. Install django-image-cropping using pip
      pip install django-image-cropping
    2. If you haven’t installed easy_thumbnails already, install it:  
      pip install easy_thumbnails
    3. Add easy_thumbnails and image_cropping to your INSTALLED_APPS.
    4. Adjust the thumbnail processors for easy-thumbnails in your settings:
      from easy_thumbnails.conf import Settings as thumbnail_settings
      THUMBNAIL_PROCESSORS = (
      'image_cropping.thumbnail_processors.crop_corners',
      ) + thumbnail_settings.THUMBNAIL_PROCESSORS

Configuration : Add an ImageRatioField to the model that contains the ImageField for the images you want to crop. The ImageRatioField simply stores the boundaries of the cropped image. It expects the name of the associated ImageField and the desired size of the cropped image as arguments. The size is passed in as a string and defines the aspect ratio of the selection as well as the minimum size for the final image:

from django.db import models
from image_cropping import ImageRatioField
class MyModel(models.Model):
image = models.ImageField(blank=True, pload_to='uploaded_images')
cropping = ImageRatioField('image', '430x360')

You can configure a size warning if users try to crop a selection smaller than the defined minimum.

Admin Integration : Add the ImageCroppingMixin to your ModelAdmin:

from django.contrib import admin           
from image_cropping import ImageCroppingMixin          

class MyModelAdmin(ImageCroppingMixin, admin.ModelAdmin):          
pass          

admin.site.register(MyModel, MyModelAdmin)

Hope this helps. For  further information see docs.

Leave a Reply

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

Tools & Practices

Tools and Technologies we use at Applied

Contact us now

Popular Posts