Đôi khi, chúng tôi có thể cần xoay hình ảnh hoặc thu phóng hình ảnh đó. Trong những trường hợp như vậy, thư viện phóng to hình ảnh phía máy khách được sử dụng để thêm tính năng jquery của việc thu phóng-xoay trên tệp html. Chúng tôi chỉ cần tải jquery js và css trong tệp html.
Tạo một dự án Django và một ứng dụng. Thiết lập url và thực hiện một số việc cơ bản như thêm ứng dụng trong INSTALLED_APPS.
Cài đặt django-client-side-image-cropping thư viện
pip install django-client-side-image-cropping
Hiện có trong settings.py, thêm dòng sau -
INSTALLED_APPS+=['client_side_image_cropping']
Ở đây, chúng tôi đã thực hiện một cài đặt đơn giản về việc thêm mô-đun làm ứng dụng.
Ví dụ
Trong models.py , thêm các dòng sau -
from django.db import models # Create your models here. class Data(models.Model): image=models.ImageField(upload_to ='myimages/')
Tại đây, chúng tôi thiết lập mô hình của mình có trường hình ảnh.
Thiết lập gốc đa phương tiện trong settings.py.
Trong urls.py , thêm các dòng sau -
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) Ở đây, chúng tôi đã thực hiện một url phương tiện cơ bản cài đặt mà bạn chắc chắn biết.
Hiện có trong views.py , thêm phần sau -
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}) Ở đây, chúng tôi đã tạo một biểu mẫu đơn giản. Đây là một biểu mẫu mô hình, vì vậy trên trường hình ảnh của nó, chúng tôi đã thêm một tiện ích cắt xén.
Trong home.html, thêm phần sau -
{% 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> Ở giao diện người dùng, chúng tôi đã tải một số jQueries và một số kiểu và hiển thị biểu mẫu sẽ nhận đầu vào.
Bây giờ tất cả đã được thực hiện. Hãy kiểm tra kết quả đầu ra.
Đầu ra
Bạn sẽ nhận được một giao diện như thế này, trên đó bạn có thể xoay và thu phóng ảnh. Nó không phải là một giao diện đẹp mắt, tuy nhiên bạn có thể sửa đổi nó bằng cách sử dụng CSS.
Lưu ý rằng hình ảnh được tải lên có thể trông bị dịch chuyển, vì vậy hãy sử dụng xoay để đặt nó ổn định. Sự dịch chuyển đó có thể gây ra do sự cố trình duyệt.
