Package: django-client-side-image-cropping
django-client-side-image-croppingWidget for the Django ImageField that provides an interface for cropping the image client-side (Using theCroppieJavascript library) to a specific size. Compatible with any Django form, including django-admin sites.This widget differs fromdjango-image-croppingbecause it performs the cropping operation in the browser instead of on the server.Usedjango-image-croppingif you want to save a copy of the original image on your server.Usedjango-client-side-image-cropping(this widget) if you don't need the original image. It will save you storage space and bandwidth.Installation and setupInstall django-client-side-image-cropping (DCSIC) using pip :pip install django-client-side-image-croppingMake sure that'django.contrib.staticfiles'isset up properlyand add'client_side_image_cropping'to yourINSTALLED_APPSsetting :INSTALLED_APPS = [
    # ...
    'django.contrib.staticfiles',
    # ...
    'client_side_image_cropping',
]

STATIC_URL = '/static/'Including static JS and CSS filesDCSIC needs a few Javascript and CSS files to function. If you use the widget in a django-admin site, you can use the first method to include these files. For all other sites, you should read the "For generic forms" section below.For admin sitesLet your Admin classes inherit fromDcsicAdminMixin, which will instruct the admin interface to include the necessary files:from client_side_image_cropping import DcsicAdminMixin

class EbookAdmin(admin.ModelAdmin, DcsicAdminMixin):
    form = EbookFormFor generic formsEvery page containing a form using theClientsideCroppingWidgetshould include jQuery 1.9 (or newer) and two JS and CSS files in theheadsection:{% load static %}

<head>
    <link rel="stylesheet" href="{% static "client_side_image_cropping/croppie.css" %}">
    <link rel="stylesheet" href="{% static "client_side_image_cropping/cropping_widget.css" %}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="{% static "client_side_image_cropping/croppie.min.js" %}"></script>
    <script src="{% static "client_side_image_cropping/cropping_widget.js" %}"></script>
</head>UsageUse theClientsideCroppingWidgetfor anydjango.forms.ImageFieldin a Form :from client_side_image_cropping import ClientsideCroppingWidget

class EbookForm(forms.ModelForm):
    class Meta:
        model = Ebook
        fields = ['title', 'cover_photo']
        widgets = {
            'cover_photo': ClientsideCroppingWidget(
                width=400,
                height=600,
                preview_width=100,
                preview_height=150,
            )
        }Constructor parameters for theClientsideCroppingWidget:widthandheight(int, required): Dimensions of the resulting image (after cropping)preview_widthandpreview_height(int): Dimensions of the preview of the cropped image that will appear in the form. Defaults to thewidthandheightparamters if omitted.clearable(bool): Add a "Delete image" button to the widget. If omitted, the button will be visible only if therequiredparameter of theImageFieldis set ot False.format(str): The file format of the resulting image. Must be either'jpeg'(default),'png'or'webp'.quality(int): The quality of the image as a percentage. Only applicable ifformatis set to'jpeg'. Set to a low value for high compression, or100for lossless compression.file_name(str): File name of the cropped image. If omitted, a random file name will be generated to avoid name collisions.