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

บทความนี้จะแนะนำวิธีการเพิ่มฟีเจอร์ซูมและหมุนรูปภาพฝั่งไคลเอ็นต์ (Client-side) ใน Django โดยใช้ไลบรารี django-client-side-image-cropping ซึ่งช่วยให้ผู้ใช้สามารถปรับแต่งรูปภาพได้โดยตรงบนเบราว์เซอร์ก่อนอัปโหลด

ขั้นตอนการติดตั้งและตั้งค่า

1. สร้างโปรเจกต์ Django และติดตั้งแพ็กเกจ

pip install django-client-side-image-cropping

2. เพิ่มแอปใน settings.py

INSTALLED_APPS += ['client_side_image_cropping']

3. สร้าง Model ที่มี ImageField

from django.db import models

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

4. ตั้งค่า Media URL ใน settings.py และ urls.py

ใน settings.py เพิ่ม:

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

ใน 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)

5. สร้าง Form ใช้ ClientsideCroppingWidget

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

6. สร้าง View สำหรับจัดการ Form

from django.shortcuts import render
from .forms import DataForm

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

7. สร้าง Template home.html

{% load static %}
{% load cropping %}
{% load thumbnail %}
<!DOCTYPE html>
<html>
<head>
    <title>Image Cropping Demo</title>
    <link rel="stylesheet" href="{% static 'client_side_image_cropping/cropping.css' %}">
    <link rel="stylesheet" href="{% static 'client_side_image_cropping/cropping_widget.css' %}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="{% static 'client_side_image_cropping/croppie.min.js' %}"></script>
    <script src="{% static 'client_side_image_cropping/cropping_widget.js' %}"></script>
</head>
<body>
    <h2>Image Cropping & Rotation</h2>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form.as_p }}
        <input type="submit" value="Save">
    </form>
</body>
</html>

ผลลัพธ์

หลังจากรันเซิร์ฟเวอร์และเปิดหน้าเว็บ คุณจะได้อินเทอร์เฟซที่อนุญาตให้ซูมและหมุนรูปภาพได้ โดยอินเทอร์เฟซอาจดูไม่ค่อยสวยงาม แต่สามารถปรับแต่งด้วย CSS ได้ตามต้องการ

หมายเหตุ: รูปภาพที่อัปโหลดอาจแสดงตำแหน่งผิดปกติ สามารถใช้ปุ่มหมุนเพื่อแก้ไขได้ ปัญหานี้อาจเกิดจากเบราว์เซอร์