Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Client side image zooming and rotating in Django
Sometimes, we may need to rotate an image or zoom it. In such cases, a client-side image zooming library is used to add jquery feature of zooming-rotating on html file. We just needed to load jquery js and css in html file.
Create a Django project and an app. Setup urls and do some basic stuff like adding app in INSTALLED_APPS.
Install the django-client-side-image-cropping library
pip install django-client-side-image-cropping
Now in settings.py, add the following line −
INSTALLED_APPS+=['client_side_image_cropping']
Here, we have done a simple setting of adding a module as an app.
Example
In models.py, add the following lines −
from django.db import models # Create your models here. class Data(models.Model): image=models.ImageField(upload_to ='myimages/')
Here, we setup our model which have an image field.
Setup media root in settings.py.
In urls.py, add the following lines −
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_RO
OT)Here, we have done a basic media url setting which you surely know.
Now in views.py, add the following −
from django.shortcuts import render
from django import forms
from .models import Data
from client_side_image_cropping import ClientsideCroppingWidget
# Create your views here.
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})Here, we created a simple form. It is a model form, so on its image field, we have added a cropping widget.
In home.html, add the following −
{% load static %}
{% load cropping %}
{% load thumbnail %}
<!DOCTYPE html>
<html>
<head>
<title>
TUT
</title>
<link rel="stylesheet" href="{% static "client_side_i
mage_cropping/cropping.css" %}"></script>
<link rel="stylesheet" href="{% static "client_side_i
mage_cropping/cropping_widget.css" %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jq
uery/1.12.4/jquery.min.js"></script>
<script src="{% static "client_side_image_cropping/cr
oppie.min.js" %}"></script>
<script src="{% static "client_side_image_cropping/cr
opping_widget.js" %}"></script>
</head>
<body>
<h2>HI</h2>
{% csrf_token %}
<form method="post" enctype="multipart/formdata">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Save"/>
</form>
</body>
</html>At the frontend, we loaded some jQueries and some styles, and render the form which will take the input.
Now all is done. Let's check the output.
Output
You will get an interface like this, on which you can rotate and zoom the photo. It is not a very good looking interface, however you can modify it by using CSS.
Note that the image uploaded might look displaced, so use rotate to set it right. That displacement maybe caused due to browser problems.
466 Views
