【后端过程记录】用flask搭建服务器作后端接收数据 将base64字符串码解码为可读取文件 载入训练好的模型进行预测

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

因为项目的原因了解到有一个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
将数据转换为 Base64 字符串过程通常包括以下几个步骤:读取原始数据(如图像、文件等),将其转换为二进制格式,然后使用 Base64 编码算法将其编码字符串。这一过程广泛应用于网络传输、数据存储等领域。 在不同的编程语言中,实现该功能的方法略有不同。以下是几种常见语言的示例: ### Python Python 中可以使用 `base64` 模块来完成图像或字节数据到 Base64 字符串的转换: ```python import base64 # 将图片文件读取并转换为Base64字符串 with open("image.png", "rb") as image_file: encoded_string = base64.b64encode(image_file.read()).decode("utf-8") print(encoded_string) ``` 如果需要将 Base64 字符串解码回图片文件,可以这样做: ```python # 将Base64字符串解码并写入文件 decoded_data = base64.b64decode(encoded_string) with open("output_image.png", "wb") as image_file: image_file.write(decoded_data) ``` ### Android (Java) 在 Android 开发环境中,可以通过如下方式将字节数组转换为 Base64 字符串: ```java import android.util.Base64; byte[] data = ...; // 假设data是你想要编码的字节数组 String encodedString = Base64.encodeToString(data, Base64.DEFAULT); ``` 要从 Base64 字符串恢复字节数组,可以使用以下代: ```java byte[] decodedBytes = Base64.decode(encodedString, Base64.DEFAULT); ``` ### JavaScript (Node.js) 对于 Node.js 环境,你可以利用 Buffer 对象来进行转换: ```javascript // 读取文件内容,并转换成Base64字符串 const fs = require('fs'); let bitmap = fs.readFileSync('image.png'); let base64String = Buffer.from(bitmap).toString('base64'); console.log(`data:image/png;base64,${base64String}`); ``` 如果你有 Base64 编码的数据并且想把它转回原始字节形式,可以这样操: ```javascript // 解码Base64字符串回到原始字节 let originalData = Buffer.from(base64String, 'base64'); fs.writeFileSync('decoded_image.png', originalData); ``` ### 微信小程序 微信小程序中处理 Base64 转换可以借助第三方库如 `base64-arraybuffer`: ```javascript const base64ToArrayBuffer = require('base64-arraybuffer'); async function convertBase64ToBytes(base64) { return await base64ToArrayBuffer.decode(base64); } ``` 这些方法展示了如何根据不同平台和环境的需求,有效地进行 Base64 编码解码的操。确保选择适合你当前开发环境的方法来实现所需的功能[^5]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值