在 Django 中建立截圖網站
在本文中,我們將瞭解如何在 Django 中建立截圖網站。此網站將在我們點選“截圖”時基本捕獲螢幕截圖。然後它將截圖儲存在我們的媒體資料夾中,並且我們可以在需要時檢視它。
示例
因此,讓我們從建立專案和應用程式開始。
在 **settings.py** 中,在 **INSTALLED_APPS** 中新增您的應用程式名稱,並在底部新增以下程式碼 -
MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR/'media'
我們剛剛為我們的影像上傳目的設定了基本的媒體資料夾。
現在在專案的 **urls.py** 中 -
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
# this is my app name
path('',include('screenshottaker.urls'))
]在這裡,我們只是添加了我們的應用程式 **urls.py**
在應用程式的 **urls.py** 中 -
from django.urls import path,include
from . import views
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('', views.home)
]+ static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)我們只是呈現了簡單的檢視並設定了媒體錐形 **urls**。
安裝以下模組 -
pip install pyautogui pip install pillow
在這裡,我們安裝了將要使用的庫。
在 **views.py** 中,新增以下程式碼 -
from django.shortcuts import render
# Create your views here.
import random
import pyautogui
from django.conf import settings
from django.contrib import messages
def home(request):
if request.method == "POST":
ss = pyautogui.screenshot()
img = f'myimg{random.randint(1000,9999)}.png'
ss.save(settings.MEDIA_ROOT/img)
messages.success(request,'screenshot has been taken')
return render(request,'home.html',{'img':img})
return render(request,'home.html')在這裡,在 **views.py** 中,我們只是讓 **pyautogui** 拍攝截圖,然後我們使用 **png** 生成隨機數來建立影像名稱。然後,我們將影像儲存到 **MEDIA_ROOT**,它是一個媒體資料夾。然後,我們向我們的前端傳送一條訊息以及我們剛剛拍攝的截圖。
現在,您需要在專案和應用程式目錄的同一級別建立“media”資料夾。
在 **app** 目錄中的遷移資料夾的同一級別建立 **templates** 資料夾,並建立 **"home.html"** 並新增以下程式碼 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/
dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<style>
img{
width: 800px;
}
</style>
{% if messages%}
{% for message in messages%}
<div class="text-center mt-5">{{message}}</div>
{%endfor%}
{%endif%}
<form method="post" class="text-center">{%csrf_token%}
<button class="p-3 btn btnsuccess">Take A Screenshot</button>
</form>
{% if img%}
<div class="text-center p-5 mt-5 container border shadowsm">
<img src="http://127.0.0.1:8000/media/{{img}}" class= "img-fluid">
</div>
{%endif%}
</body>
</html>現在,我們都完成了。在這裡,我們使用 CSS 建立了一個簡單的前端和一個 POST 表單,該表單使用 Django 條件來顯示影像和訊息。
輸出
—

廣告
資料結構
網路
關係型資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP