Skip to main content

A simple Django app to crop and resize images

Project description

Installation

run  pip install django-html5croppingtools

Configure settings.py

Add html5croppingtools to INSTALLED_APPS

manage.py

run manage.py collectstatic

Examples

Admin example without saving original image

#models.py
class MyModel(models.Model):
    ...
    image = models.ImageField(upload_to='<upload path>')
    ...

#admin.py
....
from html5croppingtools.fields import CropImageField
from html5croppingtools.forms import CropImageFormMixin
....

class MyModelForm(CropImageFormMixin, ModelForm):
    """
    :param max_size maximum size of image width or height(depends on which is greater) in pixels
    :param width_ratio and height_ratio using this two parameters code calculates ratio
           between width and height of image and helps when selecting cropping area in admin by fixing ratio between sides
    """
    image = CropImageField(max_size=900, width_ratio=500,height_ratio=300)
    ....


@admin.register(MyModel)
class MyModelAdmin(admin.ModelAdmin):
    form = MyModel
    ....

Admin example with saving original image

...
class MyModel(models.Model):
        ...
        image = models.ImageField(upload_to='<upload path>')
        original_image = models.ImageField(upload_to='<upload path>')
        ...
...
class MyModelForm(CropImageFormMixin, ModelForm):
    """
    :param original_field name of corresponding model's field where you want to save original image
    """
    image = CropImageField(
        original_field='original_image', max_size=900,
        width_ratio=500, height_ratio=300,
    )
    ....

On the fly cropping

Add html5croppingtools.imagecrop.ImageCropMiddleware to MIDDLEWARE_CLASSES

after adding html5croppingtools.imagecrop.ImageCropMiddleware to MIDDLEWARE_CLASSES
you can add "quality=<int>&dimensions=<int x0 >x<int y0 >x<int x1 >x<int y1>" this parameters to GET querystring
and middleware will serve corresponding image cropped and resized

Middleware working steps:

  1. If “quality” is supplied, image will be resized
  2. If crop “dimensions” are supplied, image will be cropped
  3. return image

Note: “dimensions” and “quality” parameters are optional

Example

/media/image/my_image_guid.jpeg?quality=1200&dimensions=300x200x900x800

  1. middleware will resize image proportionally making It’s bigger side equal to 1200 pixels
  2. after shrinking it will crop x1=300 y1=200 x2=900 y2=800 rectangle
  3. return image

Template example

{% load croppingtools_extra %}
<img src="{% html5crop MyModel.image dimensions='100x100x300x300' quality=500 %}">

takes “ImageFiled”, “dimensions” and “quality” parameters and returns url “/media/image/my_image_guid.jpeg?quality=500&dimensions=100x100x300x300” after which middleware will serve cropped and resized image

Note: “dimensions” and “quality” parameters are optional

Project details


Release history Release notifications

This version
History Node

0.1.3

History Node

0.1.2

History Node

0.1.1

History Node

0.1

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Filename, size & hash SHA256 hash help File type Python version Upload date
django_html5croppingtools-0.1.3-py3-none-any.whl (74.9 kB) Copy SHA256 hash SHA256 Wheel py3 Jul 30, 2015
django-html5croppingtools-0.1.3.tar.gz (67.6 kB) Copy SHA256 hash SHA256 Source None Jul 30, 2015

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging CloudAMQP CloudAMQP RabbitMQ AWS AWS Cloud computing DataDog DataDog Monitoring Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page