在Flask框架中将图片数据传给WEB页面

在Flask框架中将cv2/PIL的图像类型的数据传送给WEB页面，通过将图像数据转化为字节流，然后再使用base64.b64encode进行编码进行发送，在在js中通过指定图片的类型来接受。

python代码

接受页面发来的图像文件并发送一张新的图像数据 

from PIL import Image
import base64
import io

@app.route("/image", methods=["POST"])
# 创建一张图片并返回Base64编码的图片数据
def get_detection():
    image = request.files["file"]        # 读取接受的图片
    img_bytes = image.read()
    image = Image.open(io.BytesIO(image_bytes))   
    img = Image.new('RGB', (200, 200), color='red')    # 创建一张新的图片

    # 将图片转换为字节流
    buffered = io.BytesIO()
    img.save(buffered, format="JPEG")
    img_bytes = buffered.getvalue()

    # 对字节流进行Base64编码
    encoded_image = base64.b64encode(img_bytes)
return img_stream    

 JavaScript代码

在JavaScript中将服务器发送来的图像数据进行解码并替换页面中的图片

// 按键绑定函数
function detect() {