ডжанগোতে ক্লায়েন্ট-সাইড ইমেজ জুমিং ও রোটেটিং

ওয়েব অ্যাপ্লিকেশনে ব্যবহারকারীরা প্রায়ই আপলোড করা ছবিগুলো জুম বা ঘুরিয়ে দেখতে চায়। ডжанগোতে এটি ক্লায়েন্ট-সাইড লাইব্রেরি ব্যবহার করে সহজে বাস্তবায়ন করা যায়। এই টিউটোরিয়ালে django-client-side-image-cropping প্যাকেজ ব্যবহার করে ইমেজ জুম, রোটেট এবং ক্রপ করার পদ্ধতি দেখানো হয়েছে।

প্রজেক্ট সেটআপ

প্রথমে একটি ডжанগো প্রজেক্ট এবং অ্যাপ তৈরি করুন। তারপর settings.py-এ অ্যাপটি INSTALLED_APPS-এ যোগ করুন এবং URL কনফিগারেশন সম্পন্ন করুন।

লাইব্রেরি ইনস্টল করুন

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-এ MEDIA_URL এবং MEDIA_ROOT সেট করুন। urls.py-এ মিডিয়া ফাইল সার্ভ করার জন্য:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('', views.home, name='home'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

ভিউ ও ফর্ম তৈরি

views.py-এ ClientsideCroppingWidget ব্যবহার করে ফর্ম তৈরি করুন:

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()
    else:
        form = DataForm()
    return render(request, 'home.html', {'form': form})

টেমপ্লেট (home.html)

প্রয়োজনীয় CSS, JS এবং jQuery লোড করে ফর্ম রেন্ডার করুন:

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



    Image Cropping Demo
    
    
    
    
    


    ইমেজ আপলোড ও এডিট
    
        {% csrf_token %}
        {{ form.as_p }}

আউটপুট

সার্ভার চালু করুন (python manage.py runserver) এবং ব্রাউজারে যান। আপনি একটি ইন্টারফেস পাবেন যেখানে ছবি আপলোড করে জুম, রোটেট এবং ক্রপ করা যাবে। UI কাস্টমাইজ করতে CSS ব্যবহার করুন।