在 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 條件來顯示影像和訊息。

輸出

更新於: 2021年8月25日

755 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始
廣告

© . All rights reserved.