django-cropper-image

django-cropper-image is an app for client side cropping and compressing uploaded images via Django's app using with help cropper.js cropperjs. github link django-cropper-image.

Screenshot:

django-cropper-image is very usefull image upload with a specific size for your templates. it is more userfriendly no need add more field for cropping data storage in your db. django-cropper-image is keep both cropped image and orginal image and also setting custom configuration as you need like aspect ratio (3:4,16:9) vise versa. and you can set minimum and maximum crop width and height. it can also set compressing of image.

Installation

1. Install django-cropper-image using pip:

   pip install django-cropper-image
   

Configuration

1. settings.py:

   INSTALLED_APPS = [
           ...
           'django_cropper_image',
       ]
   '''
   DJANGO_CROPPER_IMAGE_SETTINGS is optional
   
   Notes : Please use
           if you use "EXCLUDE_CROPPERJS" please manually include your cropper js and css files
   
   Warning : Change only if you need to CROPPERJS_STATIC_JS,CROPPERJS_STATIC_CSS,CUSTOM_STATIC_JS,CUSTOM_STATIC_CSS,TEMPLATES
   '''
   
   DJANGO_CROPPER_IMAGE_SETTINGS ={
       'EXCLUDE_CROPPERJS':False, #can excude cropperjs js and css files
       'CROPPERJS_STATIC_JS':'django_cropper_image/js/cropper.min.js', # can change cropper js file
       'CROPPERJS_STATIC_CSS':'django_cropper_image/css/cropper.min.css',# can change cropper css file
       'CUSTOM_STATIC_JS':'django_cropper_image/js/image_cropper.js', # can change django_cropper_image module custom js
       'CUSTOM_STATIC_CSS':'django_cropper_image/css/image_cropper.css', # can change django_cropper_image module custom css
       'TEMPLATES':'django_cropper_image/image_cropper_input.html', # can change django_cropper_image module template files
   }
   

models

Add an ImageCropperField to the model that images you want to crop.you don't worried about if form error occure the image is remove

1. Models.py:

   from django.db import models
   from django_cropper_image.fields import ImageCropperField
   
   class Images(models.Model):
       image = ImageCropperField(upload_to='image',max_length=255)
   

forms

1. forms.py:

   from django import forms
   from django.forms import ModelForm
   from .models import Images
   
   class ImageForm(ModelForm):
       def __init__(self, *args, **kwargs):
           super().__init__(*args, **kwargs)
           # Form configuration is optional. You can change the default.
           self.fields['image'].widget.attrs.update({
               'data-aspectratio_w':16, #aspect ratio of width (Default : 1)
               'data-aspectratio_h':9, #aspect ratio of height (Default : 1)
               'data-mincropWidth' : 300, #minimum crop width
               'data-mincropHeight' : 300, #minimum crop height
               'data-maxcropWidth' : 600, #maximum crop width
               'data-maxcropHeight' :600, #maximum crop height
               'data-cropRestrict':"true", #minimum and maximum  work only when cropRestrict true
               'data-mincontainerwidth' : 300, #minimum width of image container
               'data-mincontainerheight' : 300,#minimum height of image container
               'data-filesize' : 0.5, #. 1 mb 2mb if the file size reach config file size it will be compress
               'data-fileresolution' : 0.7, #.0.7 medium resolution
               'data-fillcolor' : '#fff', #color of the cropped image background
               'data-maxmainimagewidth' : 2000, #uploaded image maximum width height take accordingily
               'data-compress':"true", # compress yes:No (Default : true)
               'data-orginal_extension':"false", # (Default : false)  if .png no chnage in png file otherwise convert jpg
   
   
           })
   
       class Meta:
           model       = Images
           fields      = "__all__"
       def clean(self, *args, **kwargs):
           self.cleaned_data = super().clean(*args, **kwargs)
   

views

1. views.py:

   from django.shortcuts import render
   from django.http import HttpResponse,HttpResponseRedirect
   from django.views import View
   from django.urls import reverse
   from .forms import ImageForm
   from .models import Images
   from django.conf import settings
   class ImageView(View):
       template_dir = "example_project/"
       def get(self, request, *args, **kwargs):
           if 'id' in kwargs and kwargs['id']:
               context={}
               instance =  Images.objects.filter(pk =kwargs['id'] ).first()
               form = ImageForm(instance =instance)
               context['form'] =form
               context['form_media'] =form.media
           elif 'delete_id' in kwargs and kwargs['delete_id']:
               instance =  Images.objects.filter(pk =kwargs['delete_id'] ).delete()
               return HttpResponseRedirect(reverse('image_add'))
   
           else :
               context ={}
               form = ImageForm()
               context['form'] =form
               context['form_media'] =form.media
           #Send to the render view page
           return render(request, self.template_dir+'home.html',context)
       def post(self, request, *args, **kwargs):
   
           context ={}
           if 'id' in kwargs and kwargs['id']:
               instance =  Images.objects.filter(pk =kwargs['id'] ).first()
               form = ImageForm(request.POST or None,request.FILES or None,instance =instance)
               if request.POST and form.is_valid():
                   form.save()
   
                   return HttpResponseRedirect(reverse('image_edit',kwargs={'id':kwargs['id']}))
           else :
   
               form = ImageForm(request.POST or None,request.FILES or None)
               if request.POST and form.is_valid():
                   form.save()
                   return HttpResponseRedirect(reverse('image_add'))
           context['form'] =form
           context['form_media'] =form.media
   
           #Send to the render view page
           return render(request, self.template_dir+'home.html',context)
   

templates

1. templates.html:

   {% load static %}
   {% load i18n %}
   
   <!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="description" content="Django image cropper.">
   <meta name="author" content="Aneesh Usman">
   {% block stylesheet %}
   {% if form_media.css %}
       {{ form_media.css }}
   {% endif %}
   {% endblock %}
   <title>Django Image Cropper</title>
   </head>
   <body>
   
   <form method="{{form.method|default:'POST'}}" enctype="multipart/form-data" class="{{form.class}} m-form m-form--fit m-form--label-align-right" action="{{form.action|default:request.path}}" novalidate>
       {% csrf_token %}
       {{ form }}
       <input type="submit" value="Submit">
   </form>
   
   
   <!-- Scripts -->
   
   <script src="/static/example_project/js/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
   <script src="/static/example_project/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
   {% block javascript %}
           {% if form_media.js %}
           {{ form_media.js }}
           {% endif %}
       {% endblock %}
   
   </body>
   </html>