首页python websocket img html

python websocket img html

时间: 2023-06-12 11:02:31 浏览: 132

可以使用 Python 的 WebSocket 库来实现 WebSocket 通信，使用 HTML 和 JavaScript 来显示和处理图像。下面是一个简单的例子：服务端（使用 Flask 和 Flask-SocketIO 库）： ```python from flask import Flask, render_template from flask_socketio import SocketIO, emit app = Flask(__name__) app.config['SECRET_KEY'] = 'secret!' socketio = SocketIO(app) @app.route('/') def index(): return render_template('index.html') @socketio.on('connect') def test_connect(): print('Client connected') @socketio.on('disconnect') def test_disconnect(): print('Client disconnected') @socketio.on('image') def handle_image(img): # 处理图像 # ... emit('response', 'Image received') if __name__ == '__main__': socketio.run(app) ``` 客户端（使用 HTML 和 JavaScript）： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebSocket Image</title> </head> <body> <script src="https://cdn.socket.io/socket.io-3.1.0.min.js"></script> <script> var socket = io.connect('http://localhost:5000'); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); function drawImage() { ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL(); socket.emit('image', dataURL); } img.onload = function() { drawImage(); } socket.on('response', function(data) { console.log(data); }); img.src = 'image.jpg'; </script> </body> </html> ``` 在客户端中，我们使用 Canvas 来绘制图像，并将图像转换为 Base64 编码的数据 URL，然后通过 WebSocket 发送给服务端。服务端收到图像后进行处理，并发送响应给客户端。

阅读全文