在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() {
    "use strict";
    let fileObj = $("#load_img")[0].files[0];    // 获取ID为"load_img"的对象
    let form = new FormData();    //创建Form对象，将图片POST到服务器
    let img_src;
    form.append("file", fileObj);
    $.ajax({
        type: 'POST',
        url: "imageDetect",        // POST的路由
        data: form,
        async: false,
        processData: false,
        contentType: false,
        success: function (res){    // 回调函数，res为服务器接收的base64类型的图像数据
            img_src = "data:image/png;base64,"+res;
            $("#img").attr("src",img_src);   // 替换ID为"img"对象的图像为服务器发送的图像
        },    
    });

}