上次實驗了圖片上傳方式把客戶端圖片保存到服務器的方法
這次經過實驗實現了畫板圖片直接上傳到服務器並保存的方法
只要驗證了幾個概念
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()