Django में क्लाइंट-साइड इमेज ज़ूमिंग और रोटेटिंग

कभी-कभी हमें किसी इमेज को रोटेट या ज़ूम करने की आवश्यकता होती है। ऐसे मामलों में, क्लाइंट-साइड इमेज ज़ूमिंग लाइब्रेरी का उपयोग करके HTML फाइल पर jQuery की ज़ूमिंग-रोटेटिंग सुविधा जोड़ी जाती है। हमें बस HTML फाइल में jQuery JS और CSS लोड करने की आवश्यकता होती है।

प्रोजेक्ट सेटअप

एक Django प्रोजेक्ट और ऐप बनाएं। urls सेट करें और INSTALLED_APPS में ऐप जोड़ने जैसे बुनियादी कार्य करें।

लाइब्रेरी इंस्टॉल करें

pip install django-client-side-image-cropping

settings.py में कॉन्फ़िगरेशन

INSTALLED_APPS += ['client_side_image_cropping']

यहां हमने एक मॉड्यूल को ऐप के रूप में जोड़ने की सरल सेटिंग की है।

उदाहरण

models.py

from django.db import models

class Data(models.Model):
    image = models.ImageField(upload_to='myimages/')

यहां हमने एक इमेज फील्ड वाला मॉडल सेट किया है।

मीडिया रूट सेटअप (settings.py)

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_ROOT)

यह बुनियादी मीडिया URL सेटिंग है जो आप निश्चित रूप से जानते हैं।

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})

यहां हमने एक सिंपल फॉर्म बनाया। यह एक मॉडल फॉर्म है, इसलिए इसके इमेज फील्ड पर हमने एक क्रॉपिंग विजेट जोड़ा है।

home.html

{% load static %}
{% load cropping %}
{% load thumbnail %}


    
        
        
        
        
        
        
    
    
        
HI
        {% csrf_token %}
        

            {% csrf_token %}
            {{ form.as_p }}
            
        
    

फ्रंटएंड पर, हमने कुछ jQuery और स्टाइल लोड किए, और फॉर्म को रेंडर किया जो इनपुट लेगा।

आउटपुट

आपको ऐसा इंटरफ़ेस मिलेगा जिस पर आप फोटो को रोटेट और ज़ूम कर सकते हैं। यह बहुत अच्छा दिखने वाला इंटरफ़ेस नहीं है, लेकिन आप CSS का उपयोग करके इसे संशोधित कर सकते हैं।

ध्यान दें कि अपलोड की गई इमेज विस्थापित दिख सकती है, इसे सही करने के लिए रोटेट का उपयोग करें। यह विस्थापन ब्राउज़र समस्याओं के कारण हो सकता है।