ภาพฝั่งไคลเอ็นต์ซูมและหมุนใน Django

บางครั้ง เราอาจต้องหมุนภาพหรือซูมภาพ ในกรณีดังกล่าว ไลบรารีการซูมภาพฝั่งไคลเอ็นต์จะใช้เพื่อเพิ่มคุณสมบัติ jquery ของการซูม-หมุนบนไฟล์ html เราแค่ต้องการโหลด jquery js และ css ในไฟล์ html

สร้างโปรเจ็กต์ Django และแอพ ตั้งค่า url และทำสิ่งพื้นฐานบางอย่าง เช่น เพิ่มแอปใน 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

โปรดทราบว่าภาพที่อัปโหลดอาจดูไม่ชัด ดังนั้นให้ใช้การหมุนเพื่อตั้งค่าให้ถูกต้อง การกระจัดนั้นอาจเกิดจากปัญหาเบราว์เซอร์

ภาพฝั่งไคลเอ็นต์ซูมและหมุนใน Django