How I Built a Screenshot-taking Django Website in 17 Easy Steps

5/5 - (1 vote)

Many of us have mobile phones and laptops that take screenshots. Have you ever wondered how that was made possible? It was a feature added while designing the software component of the device using programming languages.

This shouldn’t surprise us. Software developers are working tirelessly to make life easy for us. While such a feature was implemented using programming languages for mobile and desktop applications, we can learn how to do so on web applications using Python.

πŸπŸ“· Many Python libraries can be used to take screenshots. These include pyautogui, and pillow. But the drawbacks with these libraries are that they do not offer a nice user experience such as specifying a particular width or height. They do not block ads or banners. What is more, the screenshot is only limited to the current screen.

Therefore, in this tutorial, we will take advantage of an API that is well-suited for such a task using the Django web framework. In the web application, the user will input a URL and will take a screenshot of that website when a button is clicked.

Urlbox is the API we will use. It is a paid service but we can try the features for free for seven days. Register for a free trial account to get your API key and secret key we will use in this project.

Main Libraries Needed

  1. Django – for creating web application
  2. Urlbox – to use the Urlbox API
  3. Pillow – for displaying screenshot images
  4. Tzdata – for dealing with timezones
  5. Python-decouple and python-dotenv – for loading environment variables

plus a host of other dependencies.

17 Steps to Create a Screenshot Web Application using Django

We will follow 17 steps to design a screenshot-taking website using Django.

You can follow along even if you have little knowledge of the command line as I will be showing you everything I did. But you are expected to have basic knowledge of Python, and the Ubuntu terminal installed on your system to attempt this project tutorial.

Step 1: Create and move into a new folder

mkdir django_project && cd django_project

Step 2: Create and activate a virtual environment

python3 -m  venv .venv
source .venv/bin/activate

Step 3: Install django pyautogui pillow tzdata

pip install django urlbox pillow tzdata python-decouple python-dotenv

Step 4: Create a requirements.txt file

pip freeze > requirements.txt

This will be used in the future if a new version that affects the web application was released.

Step 5: Start Django project in the current folder and Django app

django-admin startproject project .
python3 startapp screenshots

Now, you are expected to have the following files in your current folder.  project  requirements.txt  screenshots

Step 6: Create a .env file to store your API key and secret key


Step 7: Create two additional folders for the template files and media files.

mkdir templates media

Step 8: Inform Django in the INSTALLED_APP section of the file that a new Django app is created

    # custom app

Step 9: Register the templates folder in the TEMPLATES section of the file

        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # add these
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [

Step 10: Register the media folders at the last line of the file

MEDIA_URL = 'media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Be sure to import the os module.

Step 11: Create a database model for storing the screenshots

from django.db import models

class Screenshot(models.Model):
    url = models.CharField(max_length = 100 , blank = False,null = False)
    photo = models.ImageField(

The images will be saved to the images folder inside the media folder. So, make sure you create the folder.

Step 12: Create and apply migrations

python3 makemigrations screenshots
python3 migrate

Step 13: Register the project-level URLs. Go to projects/ file

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('', include('screenshots.urls')),
]+static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)

This points to the variables we added in step 10 which in turn points to the media folder. Whenever we are storing images in a Django application, this action is to be taken.

Step 14: Β Create the view function in screenshots/ file.

from django.shortcuts import render
from urlbox import UrlboxClient
from django.core.files.base import ContentFile
from decouple import config
from .models import Screenshot

API_KEY = config('API_KEY')

def index(request):
    if request.method == 'POST':
        user_url = request.POST['url']
        client = UrlboxClient(api_key=API_KEY, api_secret=SECRET_KEY)
        response = client.get({'url': user_url, 'full_page': True, 'block_ads': True})
        file = ContentFile(response.content)
        screenshot = Screenshot(url=user_url)'image.png', file)
        context = {
            'img': screenshot
        return render(request, 'index.html', context)
    return render(request, 'index.html')

After importing the necessary modules and classes, we load environmental variables. Then, we create a view function. The function retrieves the URL from an HTML form and passes it to the UrlboxClient class of the urlbox module which already has the API key and secret key.

Notice how we use python-decouple to retrieve the API key and Secret key without exposing them. These are considered best practices.

In the response variable, we customize how we want the images to appear for a nice user experience. When a request is made, we want to get the full page and block ads from being captured. This is why using the Urlbox API is one of the best ways to screenshot a web page. You can check the documentation for other customizations.

Once the screenshot is captured, we save it to a ContentFile object. Django uses this class to handle files.

Afterward, we save it to the Screenshot model. No doubt, we will like to see the screenshot that is captured by the API. So, we pass the model object to the render function to be rendered in the index.html template file.

Step 15: Add templates file in the templates folder

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <title>Take Screenshots</title>
    <nav aria-label="main navigation" class="navbar is-dark" role="navigation">
      <div class="navbar-brand">
        <a class="navbar-item"> Home </a>
    <div class="container">
        class="notification is-primary is-bordered"
        style="margin-top: 20px;">

        <form action=" " , method="post">
          {% csrf_token %}

          <div class="field">
            <label class="label">Url</label>
            <div class="control">
                class="input is-link"
                placeholder="Enter URL"
          <div class="control">
            <button class="button is-link is-centered is-rounded">
Take Screenshot
    <div class="container">
  <img src="{{ }}" />

Using django’s {…} block makes it easy to display the image to the template file. Once the screenshot is taken, the image will be displayed.

Since we are working with form, we pass in the csrf_token statement for security. As we can see, the form has the method as POST.

Notice that in the img tag, we did not specify any path, Django already knows where the image will be stored.

Step 16: Register the app-level URLs in the app folder.

from django.urls import path
from .views import index

urlpatterns = [
    path('', index, name='index’),

We have to create a file inside the screenshots folder and add the above snippets.

Step 17: Start the local server

python3 runserver


Congratulation on creating a screenshot-taking website! πŸ“·

You have learned how to install Django, load environmental variables, make an API call and render the results to a web page.

You are fully on course to designing complex web applications using the Django framework. Get the full code from my GitHub page.