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

Install django-cropper-image using pip:
```
pip install django-cropper-image
```

Configuration

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

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

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

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

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>

aneesh2usman / django_cropper_image Goto Github PK