master

分支 (1)

管理

管理

master

python-screenshot-service
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>WebSocket Screenshot Client</title>
  </head>
  <body>
    <h1>WebSocket Screenshot Client</h1>
    <canvas id="screenshotCanvas" width="800" height="600"></canvas>

    <script>
      const ws = new WebSocket('ws://127.0.0.1:12345');

      ws.onopen = () => {
        console.log('Connected to the server');
        // 开始请求截图
        requestScreenshot();
      };

      ws.onmessage = event => {
        const imgData = event.data;
        const canvas = document.getElementById('screenshotCanvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.onload = function () {
          ctx.drawImage(img, 0, 0);
          // 继续请求新的截图
          requestScreenshot();
        };
        img.src = `data:image/png;base64,${imgData}`;
      };

      function requestScreenshot() {
        // 这里定义截图的区域
        const x1 = 100;
        const y1 = 100;
        const x2 = 500;
        const y2 = 500;
        ws.send(`${x1},${y1},${x2},${y2}`);
      }
    </script>
  </body>
</html>