使用Flask保存mirror cam站点获取的摄像头图片失败如何解决

问题原因 #

• 前端发送的POST请求数据不是JSON格式，后端调用request.get_json()解析失败返回400错误
• 前端提交的base64图片带有数据头，需要先去除再解码
• 后端保存图片时使用文本写入模式，且将二进制数据强制转字符串，会导致图片文件损坏

修改方案 #

1. 前端index.html调整

修改post函数，指定发送JSON格式数据：

function post(imgdata){
$.ajax({
    type: 'POST',
    // 封装为标准JSON结构
    data: JSON.stringify({canvasData: imgdata}),
    url: '/',
    // 声明请求内容类型为JSON
    contentType: 'application/json',
    dataType: 'json',
    async: false,
    success: function(result){
        // 可自定义响应处理逻辑
    },
    error: function(){
    }
  });
};

2. 后端flaskTest.py调整

修正图片解码、写入逻辑：

from flask import Flask, render_template, request 
from datetime import datetime
import base64


app = Flask(__name__)

@app.route("/",methods=['POST','GET'])
def home():
    if request.method == 'GET':
        now = datetime.now()
        file1 = open('myfile.txt', 'w')
        file1.write("Date and Time:\t")
        file1.write(str(now))
        file1.close()

    if request.method == 'POST':
        req_data = request.get_json(force=True)
        encoded = req_data['canvasData']
        # 去除base64数据前缀
        encoded = encoded.split(',')[1]
        data = base64.b64decode(encoded)
        # 以二进制模式写入文件
        file2 = open('image.png', 'wb')
        file2.write(data)
        file2.close()
    return render_template("index.html")
    
if __name__ == "__main__":
    app.run(host="127.0.0.1", port=5000, debug=True)

验证步骤 #

修改完成后重启Flask服务，授予页面摄像头权限，等待1-2秒后查看项目目录下的image.png文件，确认可以正常打开即可。

内容的提问来源于stack exchange，提问作者Shin Chan