Zoom và xoay ảnh phía client trong Django

Đôi khi chúng ta cần xoay hoặc phóng to/thu nhỏ ảnh trong ứng dụng web. Thay vì xử lý ở server, chúng ta có thể sử dụng thư viện zoom ảnh phía client để thêm tính năng zoom và xoay bằng jQuery trực tiếp vào file HTML. Chúng ta chỉ cần tải thư viện jQuery JS và CSS vào trang HTML.

Thiết lập dự án Django

Tạo một dự án Django và một app. Cấu hình urls và thực hiện các thiết lập cơ bản như thêm app vào INSTALLED_APPS.

Cài đặt thư viện

pip install django-client-side-image-cropping

Trong settings.py, thêm dòng sau:

INSTALLED_APPS += ['client_side_image_cropping']

Đây là thiết lập đơn giản để thêm module như một app trong dự án.

Ví dụ chi tiết

1. Tạo model (models.py)

from django.db import models

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

Model này chứa một trường ảnh đơn giản.

2. Cấu hình media (settings.py)

Thiết lập MEDIA_ROOT và MEDIA_URL trong settings.py.

3. Cấu hình URLs (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)

4. Tạo View và Form (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()
    else:
        form = DataForm()
    return render(request, 'home.html', {"form": form})

Chúng ta tạo một ModelForm và gán ClientsideCroppingWidget cho trường ảnh với các tham số cấu hình kích thước và preview.

5. Template (home.html)

{% load static %}
{% load cropping %}
{% load thumbnail %}
<!DOCTYPE html>
<html>
    <head>
        <title>Demo Zoom & Xoay Ảnh</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>Demo Zoom & Xoay Ảnh</h2>
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.as_p }}
            <input type="submit" value="Lưu"/>
        </form>
    </body>
</html>

Ở frontend, chúng ta load jQuery, các file CSS và JS cần thiết, sau đó render form để người dùng upload và chỉnh sửa ảnh.

Kết quả

Bạn sẽ thấy giao diện cho phép zoom và xoay ảnh. Giao diện mặc định có thể chưa đẹp, nhưng bạn có thể tùy chỉnh bằng CSS. Lưu ý: ảnh tải lên có thể bị lệch hướng, hãy dùng nút xoay để chỉnh sửa. Điều này có thể do vấn đề của trình duyệt.