ในบทความนี้ เราจะมาดูวิธีการสร้างเว็บไซต์จับภาพหน้าจอใน 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 ซึ่งเป็นโฟลเดอร์สื่อ จากนั้น เราก็ส่งข้อความไปยังส่วนหน้าและภาพหน้าจอที่เราเพิ่งถ่าย
ตอนนี้ คุณต้องสร้างโฟลเดอร์ "สื่อ" ที่ระดับเดียวกันของไดเรกทอรีโปรเจ็กต์และแอป
สร้าง เทมเพลต โฟลเดอร์ใน แอป ไดเร็กทอรีที่ระดับเดียวกันของโฟลเดอร์การโยกย้ายและสร้าง "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" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" 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="https://127.0.0.1:8000/media/{{img}}" class= "img-fluid">
</div>
{%endif%}
</body>
</html> ตอนนี้เราทุกคนทำเสร็จแล้ว ที่นี่ เราสร้างส่วนหน้าอย่างง่ายด้วย CSS และแบบฟอร์ม POST ซึ่งใช้การปรับสภาพของ Django ในการแสดงรูปภาพและข้อความ
ผลลัพธ์
−
