在 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 条件来显示图像和消息。
输出
—

广告
数据结构
网络
关系型数据库管理系统
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP