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.
Install django-cropper-image using
pip:pip install django-cropper-image
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 }
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
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.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.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.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>