python实现：网页上点击图片的一个位置传递给后台结合Playwright实现对应操作，最后把操作结果截图返回网页

### 使用 Python 和 Playwright 实现网页交互为了实现通过点击图片获取坐标并发送到后端处理，最后将操作结果截图返回给前端的功能，可以按照如下方法构建应用。 #### 安装依赖库首先安装所需的包。确保配置好国内镜像源以加速下载过程[^1]： ```bash pip install playwright requests flask playwright install ``` #### 创建 Flask 后端服务创建一个简单的Flask服务器来接收来自前端的请求，并调用Playwright执行浏览器自动化任务。 ```python from flask import Flask, request, jsonify import asyncio from playwright.async_api import async_playwright app = Flask(__name__) @app.route('/click_image', methods=['POST']) async def click_image(): data = request.json image_x = data.get('imageX') image_y = data.get('imageY') async with async_playwright() as p: browser = await p.chromium.launch() page = await browser.new_page() url = "目标网站URL" await page.goto(url) # 假设图像在一个可点击区域中 await page.mouse.click(image_x, image_y) screenshot_path = 'screenshot.png' await page.screenshot(path=screenshot_path) await browser.close() return send_file(screenshot_path), 200 if __name__ == '__main__': app.run(debug=True) ``` 这段代码定义了一个`/click_image`接口，它接受JSON格式的数据作为输入参数，其中包含鼠标点击位置的信息（即图像上的坐标）。接着启动一个新的无头Chrome实例访问指定页面，在该页面上模拟用户的点击行为，保存当前视窗快照为PNG文件形式，并将其响应给客户端。请注意，上述示例中的 `url` 需要替换为目标站点的实际地址；另外还需要导入必要的模块如 `send_file`. #### 构建前端逻辑对于前端部分，则可以通过JavaScript发起AJAX请求向刚才建立的服务端API传送所需数据以及展示接收到的结果图片。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Click Image Example</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <img id="targetImage" src="/path/to/image.jpg"/> <button onclick="sendCoordinates()">Submit Coordinates</button> <div id="resultContainer"></div> <script type="text/javascript"> function sendCoordinates(){ var imgElement = document.getElementById('targetImage'); let rect = imgElement.getBoundingClientRect(); let mouseX = (event.clientX - rect.left); let mouseY = (event.clientY - rect.top); $.ajax({ method: "POST", contentType : 'application/json', dataType : 'json', url: "/click_image", data: JSON.stringify({imageX:mouseX,imageY:mouseY}), success:function(data){ $('#resultContainer').empty().append('<img src="' + URL.createObjectURL(data) + '">'); } }); } </script> </body> </html> ``` 此HTML文档提供了一张用于测试目的静态图片(`id=targetImage`)和按钮触发事件函数`sendCoordinates()`。当用户单击提交按钮时，会计算相对于图片左上角坐标的光标位置并通过Ajax POST 请求发送这些信息至 `/click_image` 接口。成功之后，把从服务器获得的新截屏显示出来。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

下一篇 python用if的生活案例