Django में स्क्रीनशॉट लेने वाली वेबसाइट बनाना

इस लेख में, हम देखेंगे कि Django में स्क्रीनशॉट लेने वाली वेबसाइट कैसे बनाई जाए। यह वेबसाइट मूल रूप से जब भी हम "take screenshot" पर क्लिक करते हैं तो हमारी स्क्रीन का स्क्रीनशॉट ले लेगी। फिर यह स्क्रीनशॉट को हमारे मीडिया फोल्डर में स्टोर करेगी और हम इसे जब चाहें देख सकते हैं।

उदाहरण

तो चलिए एक प्रोजेक्ट और एक ऐप बनाकर शुरू करते हैं।

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 को शामिल किया।

ऐप के 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
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" फोल्डर बनाने की आवश्यकता है।

ऐप डायरेक्टरी में 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=device-width, 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 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>

अब, हम पूरी तरह तैयार हैं। यहां, हमने CSS के साथ एक साधारण फ्रंटएंड बनाया, और एक POST फॉर्म, जो इमेज और मैसेज दिखाने के लिए Django कंडीशनिंग का उपयोग करता है।

आउटपुट