Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Creating a screenshot taking website in Django
In this article, we will create a Django website that captures screenshots of your screen. When you click "Take Screenshot", it saves the image to the media folder and displays it on the webpage.
Setting up the Django Project
First, create a Django project and app. In settings.py, add your app name to INSTALLED_APPS and configure media settings ?
MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR / 'media'
This sets up the media folder for image storage.
URL Configuration
In your project's urls.py ?
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('screenshottaker.urls'))
]
In your app's urls.py ?
from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('', views.home, name='home')
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Installing Required Libraries
Install the necessary Python packages ?
pip install pyautogui pip install pillow
PyAutoGUI captures screenshots and Pillow handles image processing.
Creating the View
In views.py, implement the screenshot functionality ?
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":
# Take screenshot
screenshot = pyautogui.screenshot()
# Generate random filename
filename = f'screenshot_{random.randint(1000, 9999)}.png'
# Save to media folder
screenshot.save(settings.MEDIA_ROOT / filename)
# Send success message
messages.success(request, 'Screenshot captured successfully!')
return render(request, 'home.html', {'img': filename})
return render(request, 'home.html')
This view captures a screenshot when a POST request is made, saves it with a random filename, and passes the filename to the template.
Creating the Template
Create a templates folder in your app directory and add home.html ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Screenshot Taker</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
img {
max-width: 800px;
width: 100%;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-4">Screenshot Taker</h1>
{% if messages %}
{% for message in messages %}
<div class="alert alert-success text-center">{{ message }}</div>
{% endfor %}
{% endif %}
<form method="post" class="text-center">
{% csrf_token %}
<button type="submit" class="btn btn-primary btn-lg">
Take Screenshot
</button>
</form>
{% if img %}
<div class="text-center mt-5">
<h3>Your Screenshot:</h3>
<div class="border p-3 shadow-sm">
<img src="{{ MEDIA_URL }}{{ img }}" class="img-fluid" alt="Screenshot">
</div>
</div>
{% endif %}
</div>
</body>
</html>
Directory Structure
Create a media folder at your project root level (same level as manage.py). Your structure should look like this ?
myproject/
??? manage.py
??? media/ # Screenshots saved here
??? myproject/
? ??? settings.py
? ??? urls.py
??? screenshottaker/
??? views.py
??? urls.py
??? templates/
??? home.html
Running the Application
Start your Django development server ?
python manage.py runserver
Visit http://127.0.0.1:8000/ and click "Take Screenshot" to capture your screen.
Key Features
| Feature | Description |
|---|---|
| PyAutoGUI Integration | Captures full screen screenshots |
| Random Filenames | Prevents file conflicts |
| Media Handling | Proper Django media configuration |
| Bootstrap UI | Responsive and clean interface |
Conclusion
This Django application demonstrates how to integrate PyAutoGUI for screenshot functionality with proper media handling. The app captures screenshots, stores them safely, and provides a clean interface for users to view their captured images.
948 Views
