Trong bài viết này, chúng ta sẽ xem cách tạo trang web chụp ảnh màn hình trong Django. Trang web này về cơ bản sẽ chụp ảnh màn hình của chúng ta bất cứ khi nào chúng ta nhấp vào "chụp ảnh màn hình". Sau đó, nó sẽ lưu trữ thư mục media inour ảnh chụp màn hình và chúng ta có thể xem nó bất cứ khi nào chúng ta muốn.
Ví dụ
Vì vậy, hãy bắt đầu bằng cách tạo một dự án và một ứng dụng.
Trong settings.py, trong INSTALLED_APPS thêm tên ứng dụng của bạn và thêm mã này ở cuối -
MEDIA_URL = '/media/' MEDIA_ROOT = BASE_DIR/'media'
Chúng tôi chỉ thiết lập thư mục phương tiện cơ bản cho mục đích tải lên hình ảnh của chúng tôi.
Hiện đã có trong urls.py của dự án -
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'))
] Ở đây, chúng tôi chỉ cần thêm ứng dụng của mình vào urls.py
Trong urls.py của ứng dụng -
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) Chúng tôi vừa hiển thị url hình nón phương tiện truyền thông đơn giản của mình và thiết lập .
Cài đặt các mô-đun sau -
pip install pyautogui pip install pillow
Tại đây, chúng tôi đã cài đặt các thư viện mà chúng tôi sẽ sử dụng.
Trong views.py , thêm mã sau -
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') Đây trong views.py , chúng tôi chỉ đơn giản thực hiện pyautogui để chụp ảnh màn hình, sau đó chúng tôi tạo số ngẫu nhiên với png để tạo tên hình ảnh. Sau đó, chúng tôi đã lưu hình ảnh tại MEDIA_ROOT đó là một thư mục phương tiện. Sau đó, chúng tôi đã gửi một tin nhắn đến giao diện người dùng và ảnh chụp màn hình mà chúng tôi vừa chụp.
Bây giờ, bạn cần tạo một thư mục "media" ở cùng cấp của dự án và thư mục ứng dụng.
Tạo mẫu trong ứng dụng thư mục ở cùng cấp của thư mục di chuyển và tạo "home.html" và thêm mã sau -
<!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/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 btnsuccess">Take A Screenshot</button>
</form>
{% if img%}
<div class="text-center p-5 mt-5 container border shadowsm">
<img src="https://127.0.0.1:8000/media/{{img}}" class= "img-fluid">
</div>
{%endif%}
</body>
</html> Bây giờ, tất cả chúng ta đã hoàn thành. Ở đây, chúng tôi đã tạo một giao diện người dùng đơn giản với CSS và một biểu mẫu ĐĂNG, sử dụng điều kiện Django để hiển thị hình ảnh và thông báo.
Đầu ra
-
