因为项目的原因了解到有一个python的flask框架,查了一下:
关于前端图片上传的canvas:
如下元素
<canvas id="canvas" width="5" height="5"></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

本文介绍如何使用前端Canvas API实现图片上传功能,并通过Flask框架在后端接收及处理这些图片,包括图片的解码、存储以及利用PyTorch进行图像识别。
最低0.47元/天 解锁文章
9046





