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

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

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

只要验证了几个概念

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>' % 100if __name__ == '__main__':app.run()

测试 http://127.0.0.1:5000/canvasTest

JS画板图片上传到服务器Python相关推荐

php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
js文件夹上传到服务器,js 上传img到服务器
jQuery插件之ajaxFileUpload 前端视图,HTML与JS代码,成功上传后,返回图片真实地址并绑定到的SRC地址lt;head>lt;script src="/jquer ...
Java实现图片上传到服务器
Java实现图片上传到服务器 #这几天研究图片上传到服务器并回显到页面遇到了问题,在这里总结一下!希望对各位有用!!! 先上代码 jsp代码: <form id="myform&quo ...
vue 富文本 quill 编辑器，实现图片上传到服务器，以及实时字数统计
vue 富文本 quill 编辑器,实现图片上传到服务器,以及实时字数统计写在前面 vue 富文本 quill / vue-quill-editor 如何使用图片上传到服务器实时字数统计图片编 ...
node.js实现图片上传
两步走战略: 将图片上传到服务器将图片的路径保存到数据库图片上传到服务器下载第三方插件multer npm install multer --save 先写一个上传图片的接口在路由文件夹中创建 ...
zx-quill+vue+element实现富文本图片上传到服务器
quill富文本编辑器图片默认是base64数据流,我们要实现把图片上传到服务器这个需求,quill中并没有找到相关配置 https://www.jianshu.com/p/9e4e4d955d0f ...
使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,...
一,前端合成带水印的图片一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
微信小程序如何把图片上传至服务器
微信小程序如何把图片上传至服务器前些日子接了个任务就是开发一个小程序,遇到了一个问题就是需要图片上传至服务器并保存记录,遵循着解决思路我们先从最开始入手 1:微信上传接口 2:服务器接收接口 3:保 ...
如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...

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

JS画板图片上传到服务器Python相关推荐

最新文章

热门文章