การสร้างเว็บไซต์ถ่ายภาพหน้าจอ (Screenshot) ด้วย Django

บทความนี้สอนสร้างเว็บถ่ายภาพหน้าจอใน Django เว็บจะถ่ายหน้าจอเมื่อกด "Take Screenshot" เก็บรูปใน media folder ดูได้ตลอด

ตัวอย่าง

สร้างโปรเจกต์และแอป

ใน 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),
    path('', include('screenshottaker.urls'))
]

ใน 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)

ติดตั้งโมดูล:

pip install pyautogui
pip install pillow

ใน views.py:

from django.shortcuts import render
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')

ใช้ pyautogui ถ่ายหน้าจอ สร้างชื่อไฟล์สุ่ม เซฟที่ MEDIA_ROOT ส่งข้อความและรูปไป frontend

สร้างโฟลเดอร์ media ระดับเดียวกับโปรเจกต์และแอป

สร้าง templates/home.html:

<!DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
</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 btn-success">Take A Screenshot</button>
    </form>
    {% if img %}
    <div class="text-center p-5 mt-5 container border shadow-sm">
        <img src="https://127.0.0.1:8000/media/{{img}}" class="img-fluid">
    </div> {% endif %}
</body> </html>

เอาต์พุต