上次实验了图片上传方式把客户端图片保存到服务器的方法
这次经过实验实现了画板图片直接上传到服务器并保存的方法
只要验证了几个概念
js端:base64传送,json传送,XMLHttpRequest,$.ajax(
python后端 接受 request.get_json request.get_data()
言归正传
环境:mac python3,js chrome浏览器
前端 引入jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8">
<!--<script src="https://code.jquery.com/jquery-3.1.1.min.js">-->
<!--</script>-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<title>Document</title>
<style type="text/css">
canvas {
border: 1px solid green;
}
</style>
</head>
<body>
画板代码 简化处理,本章不对画板的变幻莫测做说明,只需好最简单部分
主要知道创建了个一个画布 canvas = document.getElementById('drawing-board')
<canvas id="drawing-board" width="400" height="300"></canvas>
<script type="text/javascript">
//创建画布
var canvas = document.getElementById('drawing-board');
var ctx = canvas.getContext('2d');
//设置当前画布为画笔状态
var painting = false;
var lastPoint = {x: undefined, y: undefined};
var last = null;
// 鼠标按下
canvas.onmousedown = function () {
// 在鼠标按下后触发鼠标移动事件
canvas.onmousemove = move;
};
// 鼠标抬起取消鼠标移动的事件
canvas.onmouseup = function () {
canvas.onmousemove = null;
last = null;
};
// 鼠标移出画布时 移动事件也要取消。
canvas.onmouseout = function () {
canvas.onmousemove = null;
last = null;
};
// 鼠标移动函数
function move(e) {
// console.log(e.offsetX);
if (last != null) {
ctx.beginPath();
ctx.moveTo(last[0], last[1]);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
}
// 第一次触发这个函数,只做一件事,把当前 鼠标的 x , y 的位置记录下来
// 做下一次 线段的 起始点。
last = [e.offsetX, e.offsetY];
}
</script>
下面直接保存画板
有两种方法:
通过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);
<button onclick="canvasSaveToServer()">保存画板</button>
<script type="text/javascript">
//保存画板
function canvasSaveToServer() {
var imgUrl = canvas.toDataURL("image/png");
var imageDataB64 = imgUrl.substring(22);
alert("savePic" + imageDataB64);
imgData = {uploadImg:imageDataB64};
var senddata = JSON.stringify(imgData);
//通过XMLHttpRequest 传送到后台
var xhr = new XMLHttpRequest();
xhr.open("POST", "/uploadcanvas", true);
xhr.setRequestHeader('content-type', 'application/json');
xhr.send(JSON.stringify(senddata));
//方法二:通过ajax 传送到后台
// $.ajax({
// url: "/uploadcanvas",
// type: "POST",
// //data: { "uploadImg": imageDataB64},
// data:senddata,
// async: true,
// cashe: false,
// contentType: false,
// processData: false,
// success: function (returndata) {
// alert("success!")
// },
// error: function (returndata) {
// alert("上传失败!")
// }
// })
}
</script>
后端代码: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 '<h1>Hello~~~:%s</h1>' % 100
if __name__ == '__main__':
app.run()