JS画板图片上传到服务器Python

上次实验了图片上传方式把客户端图片保存到服务器的方法

这次经过实验实现了画板图片直接上传到服务器并保存的方法

只要验证了几个概念

js端：base64传送，json传送，XMLHttpRequest，$.ajax(

python后端 接受  request.get_json request.get_data()

 

言归正传

环境：mac python3，js  chrome浏览器

 

前端 引入jquery

画板代码 简化处理，本章不对画板的变幻莫测做说明，只需好最简单部分

主要知道创建了个一个画布 canvas = document.getElementById('drawing-board')

下面直接保存画板

有两种方法：

通过ajax 传送到后台对应：request.get_data()  

通过XMLHttpRequest 传送到后台对应：request.get_json()

取得画板的元素转成base64位
var imgUrl = canvas.toDataURL("image/png");
截取22未开始的字节（把图片头部去掉）这个处理在后台也可以 var imageDataB64 = imgUrl.substring(22);
定义json格式并字节转换 imgData = {uploadImg:imageDataB64}; var senddata = JSON.stringify(imgData);

保存画板

后端代码：app.py

注意  request.get_data()和request.get_json()的不同，与前端分别对应

from flask import Flask, make_response, jsonify, request
import json
import base64
app = Flask(__name__)

@app.route('/canvasTest')
def canvasTest():
    return app.send_static_file('testCanvas.html')

@app.route('/uploadcanvas', methods=["POST"])
def uploadFromCanvas():
    print('uploadFromCanvas')
    print('request.method =',request.method)
    if request.method == "POST":
        #通过get_data方式
        #recv_data = request.get_data()
        # 通过get_json方式
        recv_data = request.get_json()

        if recv_data is None:
            print("request.get_json() is None")
            recv_data = request.get_data()

        print("recv_data=", recv_data)
        json_re = json.loads(recv_data)
        print("json_re=", json_re)
        imgRes = json_re['uploadImg']
        print("imgRes=",imgRes)

        imgdata = base64.b64decode(imgRes)
        print("imgdata=",imgdata)

        file = open('1.jpg', "wb")
        file.write(imgdata)
        file.close()
        return '
Hello~~~:%s
' % 100


if __name__ == '__main__':
    app.run()

测试 http://127.0.0.1:5000/canvasTest