| 【后端过程记录】用flask搭建服务器作后端接收数据 将base64字符串码解码为可读取文件 载入训练好的模型进行预测 | 您所在的位置：网站首页 › python怎么搭建服务器 › 【后端过程记录】用flask搭建服务器作后端接收数据 将base64字符串码解码为可读取文件 载入训练好的模型进行预测 |
【后端过程记录】用flask搭建服务器作后端接收数据 将base64字符串码解码为可读取文件 载入训练好的模型进行预测
|
因为项目的原因了解到有一个python的flask框架，查了一下： 关于前端图片上传的canvas: 如下元素 可以用这样的方式获取一个 data-URL var canvas = document.getElementById("canvas"); var dataURL = canvas.toDataURL(); console.log(dataURL);// “data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC” 设置jpegs图片的质量 var fullQuality = canvas.toDataURL("image/jpeg", 1.0); // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" var mediumQuality = canvas.toDataURL("image/jpeg", 0.5); var lowQuality = canvas.toDataURL("image/jpeg", 0.1);getContext() 方法返回一个用于在画布上绘图的环境。 语法 Canvas.getContext(contextID) 参数 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。 提示：在未来，如果 < canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 “3d” 字符串参数。 返回值 一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。 后端： 首先pip install Flask 然后新建文件: from flask import Flask,make_response, jsonify from multiprocessing import Process # 配置全局app app = Flask(__name__) # 导入index中定义的所有函数 #from autotrade.server.index import * def run_index(): # 启动web服务器，使用多线程方式，接收所有http请求 app.run(host='0.0.0.0', port=5000, threaded=True) def make_new_response(data): res = make_response(jsonify({'code': 0, 'data': data})) res.headers['Access-Control-Allow-Origin'] = '*' res.headers['Access-Control-Allow-Method'] = '*' res.headers['Access-Control-Allow-Headers'] = '*' return res @app.route('/') def hello_world(): return {'hello': 'world!'} @app.route("/test") def test(): res = "{'no':'dddd'}" return make_new_response(res) if __name__ == "__main__": app.run(debug=True)
向flask后端发请求接收图片：（点击按钮触发事件) flask: from flask import Flask,make_response, jsonify from flask_cors import CORS import socket import threading import json import os from io import BytesIO from multiprocessing import Process import io from PIL import Image # 配置全局app app = Flask(__name__) # 导入index中定义的所有函数 #from autotrade.server.index import * def main(): # 创建服务器套接字 serversocket = socket.socket(socket.AF_INET, socket.SOCK_STREAM) # 获取本地主机名称 host = socket.gethostname() # 设置一个端口 port = 5000 # 将套接字与本地主机和端口绑定 serversocket.bind((host, port)) # 设置监听最大连接数 serversocket.listen(5) # 获取本地服务器的连接信息 myaddr = serversocket.getsockname() print("服务器地址:%s" % str(myaddr)) # 循环等待接受客户端信息 while True: # 获取一个客户端连接 clientsocket, addr = serversocket.accept() print("连接地址:%s" % str(addr)) try: t = ServerThreading(clientsocket) # 为每一个请求开启一个处理线程 t.start() pass except Exception as identifier: print(identifier) pass pass serversocket.close() pass def run_index(): # 启动web服务器，使用多线程方式，接收所有http请求 app.run(host='0.0.0.0', port=5000, threaded=True) CORS(app, resources=r'/*', supports_credentials=True) basedir = os.path.abspath(os.path.dirname(__file__)) @app.route('/getPic',methods=['GET', 'POST']) def findpic(): img_url = basedir+'/data/tt/b/b_1.png' print(img_url) with open(img_url, 'rb') as f: a = f.read() '''对读取的图片进行处理''' img_stream = io.BytesIO(a) img = Image.open(img_stream) imgByteArr = io.BytesIO() img.save(imgByteArr,format='PNG') imgByteArr = imgByteArr.getvalue() print(imgByteArr) return imgByteArr if __name__ == "__main__": app.run(debug=True)注意：Python在内存中读写数据，用到的模块是StringIO和BytesIO，当为StringIO时getvalue()方法用于获得写入后的str。StringIO操作的只能是str，如果要操作二进制数据，就需要使用BytesIO。可以用一个bytes初始化BytesIO，然后，像读文件一样读取： >>> from io import BytesIO >>> f = BytesIO(b'\xe4\xb8\xad\xe6\x96\x87') >>> f.read() b'\xe4\xb8\xad\xe6\x96\x87'BytesIO实现了在内存中读写bytes。 vue代码： 获取图片 data () { return { picurl: "",} }, methods: { getPic() { var that = this; this.$axios.get('http://127.0.0.1:5000/getPic',{responseType: "arraybuffer",}).then(function (response) { that.picurl = "data:image/jpeg;base64," + that.arrayBufferToBase64(response.data); }); }, arrayBufferToBase64(buffer) { //第一步，将ArrayBuffer转为二进制字符串 var binary = ""; var bytes = new Uint8Array(buffer); var len = bytes.byteLength; for (var i = 0; i |
打开浏览器：
【本文地址】
公司简介
联系我们