資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學Django 中客戶端影像縮放和旋轉
有時，我們可能需要旋轉或縮放影像。在這種情況下，客戶端影像縮放庫用於在 html 檔案中新增 jquery 的縮放旋轉功能。我們只需要在 html 檔案中載入 jquery js 和 css。
建立一個 Django 專案和一個應用程式。設定 **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)在這裡，我們完成了基本的 **media 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>在前端，我們載入了一些 jQuery 和一些樣式，並呈現將接收輸入的表單。
現在一切都完成了。讓我們檢查輸出。
輸出
您將獲得這樣的介面，您可以在其中旋轉和縮放照片。這不是一個非常漂亮的介面，但是您可以使用 CSS 修改它。
請注意，上傳的影像可能看起來錯位，因此請使用旋轉功能將其設定正確。這種錯位可能是由於瀏覽器問題造成的。
更新於：2021年8月25日
563 次瀏覽
廣告