Flask设计网页截屏远程电脑桌面及切换运行程序界面

有没有一种办法可以让我通过网页就能够实时查看远程电脑的程序运行情况呢？为此，我想到了利用python的Flask制作一个网页，然后通过cpolar，转变成一个互联网的网页，方便随时了解电脑的程序运行情况，比如百度网盘下载多少文件了，python数据处理是否完成等等。

1.flask服务端：

复制代码

# -*- coding: utf-8 -*-
"""
Created on Tue Jun 17 20:52:47 2025

@author: YBK
"""


from flask import Flask, render_template, send_file
import pyautogui
import os
import time

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('jp.html')

@app.route('/screenshot')
def take_screenshot():
    screenshot = pyautogui.screenshot()
    screenshot_path = os.path.join('static', 'screenshot.png')
    screenshot.save(screenshot_path)
    return send_file(screenshot_path, mimetype='image/png')

@app.route('/switch_window')
def switch_window():
    pyautogui.hotkey('alt', 'tab')
    time.sleep(0.5)  # 等待窗口切换完成
    return 'OK'

@app.route('/switch_window1')
def press_win_1():
    try:
        pyautogui.keyDown('win')
        time.sleep(0.1)  # 确保Win键按下
        pyautogui.press('1')
        pyautogui.keyUp('win')
        return 'OK'
    except Exception as e:
        print(f"操作失败: {str(e)}")
        return 'Err'

@app.route('/switch_window2')
def press_win_2():
    try:
        pyautogui.keyDown('win')
        time.sleep(0.1)  # 确保Win键按下
        pyautogui.press('2')
        pyautogui.keyUp('win')
        return 'OK'
    except Exception as e:
        print(f"操作失败: {str(e)}")
        return 'Err'

@app.route('/switch_window3')
def press_win_3():
    try:
        pyautogui.keyDown('win')
        time.sleep(0.1)  # 确保Win键按下
        pyautogui.press('3')
        pyautogui.keyUp('win')
        return 'OK'
    except Exception as e:
        print(f"操作失败: {str(e)}")
        return 'Err'

@app.route('/switch_window4')
def press_win_4():
    try:
        pyautogui.keyDown('win')
        time.sleep(0.1)  # 确保Win键按下
        pyautogui.press('4')
        pyautogui.keyUp('win')
        return 'OK'
    except Exception as e:
        print(f"操作失败: {str(e)}")
        return 'Err'

@app.route('/switch_window5')
def press_win_5():
    try:
        pyautogui.keyDown('win')
        time.sleep(0.1)  # 确保Win键按下
        pyautogui.press('5')
        pyautogui.keyUp('win')
        return 'OK'
    except Exception as e:
        print(f"操作失败: {str(e)}")
        return 'Err'

@app.route('/switch_windowd')
def press_win_d():
    try:
        pyautogui.keyDown('win')
        time.sleep(0.1)  # 确保Win键按下
        pyautogui.press('d')
        pyautogui.keyUp('win')
        return 'OK'
    except Exception as e:
        print(f"操作失败: {str(e)}")
        return 'Err'

@app.route('/switch_ct')
def switch_ct():
    pyautogui.hotkey('ctrl', 'tab')
    time.sleep(0.5)  # 等待窗口切换完成
    return 'OK'

@app.route('/switch_csi')
def switch_csi():
    pyautogui.hotkey('ctrl', 'shift', 'i')
    time.sleep(0.5)  # 等待窗口切换完成
    return 'OK'
if __name__ == '__main__':
    app.run(host='127.0.0.1',debug=True,use_reloader=False)

2.放在templates的网页jp.html

复制代码

<!DOCTYPE html>
<html>
<head>
    <title>远程桌面控制</title>
    <style>
        #image-container {
            width: 800px;
            height: 600px;
            border: 1px solid #ccc;
            margin: 20px auto;
        }
        #screenshot-img {
            max-width: 100%;
            max-height: 100%;
        }
        .button-container {
            text-align: center;
            margin: 20px;
        }
        button {
            padding: 10px 20px;
            margin: 0 10px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="button-container">
        <button id="screenshot-btn">截屏</button>
        <button id="switch-btn">切换</button>
        <button id="switch-btn1">Win+1</button>
        <button id="switch-btn2">Win+2</button>
        <button id="switch-btn3">Win+3</button>
        <button id="switch-btn4">Win+4</button>
        <button id="switch-btn5">Win+5</button>
        <button id="switch-btnd">Win+D</button>
    </div>
    <div id="image-container">
        <img id="screenshot-img" src="" alt="截屏将显示在这里">
    </div>
    <div class="button-container">
        <button id="switch-btnct">Ctrl+Tab</button>
        <button id="switch-btncsi">Ctrl+Shift+I</button>
    </div>
    <script>
        document.getElementById('screenshot-btn').addEventListener('click', function() {
            fetch('/screenshot')
                .then(response => response.blob())
                .then(blob => {
                    const img = document.getElementById('screenshot-img');
                    img.src = URL.createObjectURL(blob);
                });
        });

        document.getElementById('switch-btn').addEventListener('click', function() {
            fetch('/switch_window');
        });
        
        document.getElementById('switch-btn1').addEventListener('click', function() {
            fetch('/switch_window1');
        });
        
        document.getElementById('switch-btn2').addEventListener('click', function() {
            fetch('/switch_window2');
        });
        
        document.getElementById('switch-btn3').addEventListener('click', function() {
            fetch('/switch_window3');
        });
        
        document.getElementById('switch-btn4').addEventListener('click', function() {
            fetch('/switch_window4');
        });
        
        document.getElementById('switch-btn5').addEventListener('click', function() {
            fetch('/switch_window5');
        });
        
        document.getElementById('switch-btnd').addEventListener('click', function() {
            fetch('/switch_windowd');
        });
        
        document.getElementById('switch-btnct').addEventListener('click', function() {
            fetch('/switch_ct');
        });
        
        document.getElementById('switch-btncsi').addEventListener('click', function() {
            fetch('/switch_csi');
        });
    </script>
</body>
</html>

3.记得新建static文件夹在py程序的同个文件夹中。

4.使用cmd，运行cpolar http 5000

5.python提取cpolar公网地址，也就是4上面显示的网址，发送给你的微信。（用另外一个微信在服务器登录）

复制代码

# -*- coding: utf-8 -*-
"""
Created on Sat Mar 22 11:17:27 2025

@author: YBK
"""

import requests
from bs4 import BeautifulSoup
import sys
import pyperclip
from wxauto import *
wx = WeChat()
who = '你的微信名'
# 登录网站并获取页面内容
def fetch_info_from_website(login_url, info_url, credentials, tunnel_name):
  with requests.Session() as session:
    try:
      # 获取登录页面以抓取csrf token
      login_page = session.get(login_url)
      login_page.raise_for_status() # 检查请求是否成功
      login_page_soup = BeautifulSoup(login_page.text, 'html.parser')
      # 提取csrf token
      csrf_token = login_page_soup.find('input', {'name': 'csrf_token'})['value']
      credentials['csrf_token'] = csrf_token
      # 登录
      print("登录中，请等待。")
      login_response = session.post(login_url, data=credentials)
      # 检查是否登录成功
      if login_response.status_code != 200 or login_response.url == login_url:
        print("登录失败，请检查您的凭据。")
        return []
      else:
        print("登录成功。")
      # 获取信息页面
      response = session.get(info_url)
      response.raise_for_status()
      # 解析页面
      soup = BeautifulSoup(response.text, 'html.parser')
      table = soup.find('table')
      if not table:
        print("未找到隧道列表，请检查对应设备的cpolar服务和网络连接。")
        return []
      links = [] # 用于存储找到的链接
      for row in table.find_all('tr')[1:]: # 跳过表头
        cells = row.find_all('td')
        if len(cells) > 1:
          tunnel = cells[0].get_text().strip()
          url_cell = row.find('a', href=True) # 直接在行中查找<a>标签
          if tunnel == tunnel_name and url_cell:
            links.append(url_cell['href']) # 添加匹配的链接
            print(f"找到隧道 {tunnel} 的链接: {url_cell['href']}")
      return links
    except requests.RequestException as e:
      print(f"请求异常: {e}")
    except Exception as e:
      print(f"发生错误: {e}")
if __name__ == '__main__':
  login_url = "https://dashboard.cpolar.com/login"
  info_url = "https://dashboard.cpolar.com/status"
  credentials = {
    'login': '你的账号',
    'password': '你的密码'
  }
   
  # 检查是否有命令行参数传入
  # if len(sys.argv) > 1:
  #   tunnel_name = sys.argv[1] # 第一个命令行参数作为隧道名称
  # else:
  #   print("请提供一个隧道名称作为参数，或者留空以自动提示输入。")
  #   tunnel_name = input("请输入隧道名称: ")
  #   if not tunnel_name:
  #     print("隧道名称不能为空。")
  #     sys.exit(1)
  tunnel_name = 'default'
  links = fetch_info_from_website(login_url, info_url, credentials, tunnel_name)
  if links:
    print(links[0])
    message = links[0]
    wx.SendMsg(message, who)
    pyperclip.copy(links[0])
  else:
    print(f"没有找到名为 {tunnel_name} 的隧道链接。")

运行界面：

PS：为了查看我的Spyder中程序的控制台，我加上了Ctrl+Tab和Ctrl+Shift+i，每一次按后都要按一下截屏，才会显示。