Python
 Computer >> コンピューター >  >> プログラミング >> Python

Djangoでスクリーンショットを撮るウェブサイトを作成する

この記事では、Djangoでスクリーンショットを撮るWebサイトを作成する方法を説明します。このウェブサイトは基本的に、「スクリーンショットを撮る」をクリックするたびに画面のスクリーンショットを撮ります。次に、スクリーンショットをメディアフォルダに保存し、いつでも表示できます。

例

それでは、プロジェクトとアプリを作成することから始めましょう。

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)

シンプルなビューをレンダリングし、メディアを円錐形の URLに設定しました 。

次のモジュールをインストールします-

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に保存しました これはメディアフォルダです。次に、フロントエンドにメッセージを送信し、今撮ったスクリーンショットを送信しました。

次に、プロジェクトとアプリのディレクトリの同じレベルに「メディア」フォルダを作成する必要があります。

テンプレートを作成する アプリのフォルダ 同じレベルの移行フォルダにディレクトリを作成し、 "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/npm/[email protected]/
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>

これで、すべて完了です。ここでは、CSSを使用した単純なフロントエンドと、画像とメッセージを表示するためにDjangoコンディショニングを使用するPOSTフォームを作成しました。

出力

−

Djangoでスクリーンショットを撮るウェブサイトを作成する


  1. Djangoでのクライアント側の画像のズームと回転

    場合によっては、画像を回転またはズームする必要があります。このような場合、クライアント側の画像ズームライブラリを使用して、htmlファイルにズーム-回転するjquery機能を追加します。 jqueryjsとcssをhtmlファイルにロードする必要がありました。 Djangoプロジェクトとアプリを作成します。 URLを設定する INSTALLED_APPSにアプリを追加するなどの基本的な操作を行います。 django-client-side-image-croppingをインストールします ライブラリ pip install django-client-side-image-cropp

  2. Web サイトから Excel にデータをインポートする方法

    World Wide Web には膨大な有用なデータが含まれていることはよく知られています。ただし、何らかの分析を行う前に、データを Microsoft Excel にインポートする必要があります。この種のタスクを完了するために使用できる方法が 2 つあります。 Web から外部データを手動で取得 この Web ページからトップの金儲け映画の収益をダウンロードしたいとします。ここでは、簡単に行う方法を示します。 Microsoft Excel を開き、[データ] をクリックします。 タブの 外部データの取得 グループで、[ウェブから] をクリックします . 新しい Web クエリの後 ダイ