কখনও কখনও, আমাদের একটি চিত্র ঘোরানো বা জুম করার প্রয়োজন হতে পারে। এই ধরনের ক্ষেত্রে, একটি ক্লায়েন্ট-সাইড ইমেজ জুমিং লাইব্রেরি এইচটিএমএল ফাইলে জুমিং-ঘোরানোর jquery বৈশিষ্ট্য যোগ করতে ব্যবহৃত হয়। আমাদের শুধু html ফাইলে jquery js এবং css লোড করতে হবে।
একটি জ্যাঙ্গো প্রকল্প এবং একটি অ্যাপ তৈরি করুন। urls সেটআপ করুন এবং কিছু মৌলিক জিনিস করুন যেমন 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 ব্যবহার করে এটি পরিবর্তন করতে পারেন।
মনে রাখবেন যে আপলোড করা ছবিটি স্থানচ্যুত দেখাতে পারে, তাই এটি ঠিক করতে ঘোরান ব্যবহার করুন। সেই স্থানচ্যুতি ব্রাউজার সমস্যার কারণে হতে পারে।
