कभी-कभी, हमें किसी छवि को घुमाने या उसे ज़ूम करने की आवश्यकता हो सकती है। ऐसे मामलों में, क्लाइंट-साइड इमेज जूमिंग लाइब्रेरी का उपयोग एचटीएमएल फाइल पर जूमिंग-रोटेटिंग की jQuery सुविधा को जोड़ने के लिए किया जाता है। हमें बस html फ़ाइल में jQuery js और css लोड करने की आवश्यकता है।
एक Django प्रोजेक्ट और एक ऐप बनाएं। सेटअप यूआरएल और कुछ बुनियादी चीजें करें जैसे INSTALLED_APPS में ऐप जोड़ना।
django-client-side-image-cropping स्थापित करें पुस्तकालय
pip install django-client-side-image-cropping
अब settings.py, . में निम्न पंक्ति जोड़ें -
INSTALLED_APPS+=['client_side_image_cropping']
यहां, हमने एक मॉड्यूल को ऐप के रूप में जोड़ने की एक सरल सेटिंग की है।
उदाहरण
models.py . में , निम्नलिखित पंक्तियाँ जोड़ें -
from django.db import models # Create your models here. class Data(models.Model): image=models.ImageField(upload_to ='myimages/')
यहां, हम अपना मॉडल सेट करते हैं जिसमें एक छवि फ़ील्ड है।
मीडिया रूट को settings.py. . में सेट करें
urls.py . में , निम्नलिखित पंक्तियाँ जोड़ें -
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) यहां, हमने एक बुनियादी मीडिया url किया है सेटिंग जिसे आप निश्चित रूप से जानते हैं।
अब views.py . में , निम्नलिखित जोड़ें -
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}) यहां, हमने एक सरल रूप बनाया है। यह एक मॉडल फॉर्म है, इसलिए इसके इमेज फील्ड में हमने एक क्रॉपिंग विजेट जोड़ा है।
home.html . में निम्नलिखित जोड़ें -
{% 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> फ़्रंटएंड पर, हमने कुछ jQueries और कुछ शैलियों को लोड किया, और उस फॉर्म को रेंडर किया जो इनपुट लेगा।
अब सब हो गया है। आइए आउटपुट की जांच करें।
आउटपुट
आपको इस तरह का इंटरफेस मिलेगा, जिस पर आप फोटो को रोटेट और जूम कर सकते हैं। यह बहुत अच्छा दिखने वाला इंटरफ़ेस नहीं है, हालाँकि आप CSS का उपयोग करके इसे संशोधित कर सकते हैं।
ध्यान दें कि अपलोड की गई छवि विस्थापित दिख सकती है, इसलिए इसे राइट सेट करने के लिए रोटेट का उपयोग करें। वह विस्थापन शायद ब्राउज़र की समस्याओं के कारण हुआ है।
