All Projects → dima-kov → django-croppie

dima-kov / django-croppie

Licence: MIT License
Django application for croppie.js integration

Programming Languages

python
139335 projects - #7 most used programming language
CSS
56736 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to django-croppie

k3-image-clip
Visually crop images with a handy image editor directly inside the panel
Stars: ✭ 38 (+72.73%)
Mutual labels:  image-cropping
angular-croppie
Angular 1.5+ Component for Croppie
Stars: ✭ 16 (-27.27%)
Mutual labels:  croppie
MobyCAIRO
Computer-assisted image straightening and cropping
Stars: ✭ 16 (-27.27%)
Mutual labels:  image-cropping
xcrop
Mobile image cropping component - Vue React 移动端裁剪组件
Stars: ✭ 27 (+22.73%)
Mutual labels:  image-cropping
srcissors
Image cropping ui for responsive images
Stars: ✭ 15 (-31.82%)
Mutual labels:  image-cropping
Croppie
A Javascript Image Cropper
Stars: ✭ 2,330 (+10490.91%)
Mutual labels:  croppie
U-2-Net-Demo
Demonstration using Google Colab to show how U-2-NET can be used for Background Removal, Changing Backgrounds, Bounding Box Creation, Salient Feature Highlighting and Salient Object Cropping.
Stars: ✭ 132 (+500%)
Mutual labels:  image-cropping

Django Croppie

Django-croppie is an application for easy integration croppie.js image cropper to django projects.

Installation

  1. Install with pip install django-croppie

  2. Add croppie to INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    'croppie',
    ...
]

Usage

  1. To use django-croppie you should specify a form field:
from croppie.fields import CroppieField

class AddForm(forms.Form):
    photo = CroppieField()

Also CroppieField takes non required argument options - a python dictionary that represent croppie.js settings. For example:

    photo = CroppieField(
        options={
            'viewport': {
                'width': 120,
                'height': 140,
            },
            'boundary': {
                'width': 200,
                'height': 220,
            },
            'showZoomer': True,
        },
    )
  1. Add form static files to template:
{% block js %}
    {{ form.media }}
{% endblock js %}
  1. Specify position of cropper widget on page:
    <div class="row">
        <div id="cropper"></div>
    </div>
  1. That's all!

Example

There is an example project in the example directory. Read README.md for deploy instructions.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].