Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Client side image zooming and rotating in Django
Client-side image manipulation allows users to zoom and rotate images before uploading in Django applications. The django-client-side-image-cropping library provides jQuery-powered zooming and rotating functionality that works directly in the browser.
Installation and Setup
Create a Django project and app, then configure basic settings. Install the required library ?
pip install django-client-side-image-cropping
Add the library to your INSTALLED_APPS in settings.py ?
INSTALLED_APPS += ['client_side_image_cropping']
Model Configuration
Create a simple model with an image field in models.py ?
from django.db import models
class Data(models.Model):
image = models.ImageField(upload_to='myimages/')
Configure media settings in settings.py and update urls.py for media file serving ?
from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('', views.home, name="home"),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Form with Cropping Widget
Create a ModelForm that uses the ClientsideCroppingWidget in views.py ?
from django.shortcuts import render
from django import forms
from .models import Data
from client_side_image_cropping import ClientsideCroppingWidget
class DataForm(forms.ModelForm):
class Meta:
model = Data
fields = "__all__"
widgets = {
'image': ClientsideCroppingWidget(
width=400,
height=600,
preview_width=100,
preview_height=150,
)
}
def home(request):
if request.method == "POST":
form = DataForm(request.POST, request.FILES)
if form.is_valid():
form.save()
form = DataForm()
return render(request, 'home.html', {"form": form})
Template Setup
Create home.html with required CSS and JavaScript dependencies ?
{% load static %}
{% load cropping %}
{% load thumbnail %}
<!DOCTYPE html>
<html>
<head>
<title>Image Cropping Example</title>
<link rel="stylesheet" href="{% static 'client_side_image_cropping/cropping.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>
<body>
<h2>Client-Side Image Manipulation</h2>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Save"/>
</form>
</body>
</html>
Key Features
The ClientsideCroppingWidget provides several configuration options:
- width/height − Final image dimensions after processing
- preview_width/preview_height − Preview thumbnail size in the interface
- Zoom controls − Allow users to zoom in/out on images
- Rotation tools − Enable image rotation before upload
Usage Notes
The interface allows users to rotate and zoom images before submission. Images may appear displaced initially due to browser rendering − use the rotate controls to adjust positioning. The default interface is functional but can be customized with additional CSS styling.
Conclusion
The django-client-side-image-cropping library provides an easy way to add image manipulation features to Django forms. Users can zoom and rotate images client-side before uploading, improving the user experience without server-side processing.
748 Views
