在 Django 中创建截图网站


在本文中,我们将了解如何在 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**,它是一个媒体文件夹。然后,我们向我们的前端发送一条消息以及我们刚刚拍摄的截图。

现在,您需要在项目和应用程序目录的同一级别创建“media”文件夹。

在 **app** 目录中的迁移文件夹的同一级别创建 **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=devicewidth, initial-scale=1.0">
   <title>Document</title>
   <link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.0.1/
dist/css/bootstrap.min.css" rel="stylesheet" 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="http://127.0.0.1:8000/media/{{img}}" class= "img-fluid">
   </div>
   {%endif%}
</body>
</html>

现在,我们都完成了。在这里,我们使用 CSS 创建了一个简单的前端和一个 POST 表单,该表单使用 Django 条件来显示图像和消息。

输出

更新于: 2021年8月25日

755 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始
广告

© . All rights reserved.