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

最新推荐文章于 2020-12-29 14:54:06 发布

ChinaAI小童鞋

最新推荐文章于 2020-12-29 14:54:06 发布

阅读量784

点赞数 2

分类专栏： mac工具 python js

本文链接：https://blog.csdn.net/weixin_41679938/article/details/89400287

版权

mac工具同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

python

9 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

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

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

只要验证了几个概念

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()

测试 http://127.0.0.1:5000/canvasTest

ChinaAI小童鞋

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS画板图片上传到服务器Python

上次实验了图片上传方式把客户端图片保存到服务器的方法这次经过实验实现了画板图片直接上传到服务器并保存的方法只要验证了几个概念js端：base64传送，json传送，XMLHttpRequest，$.ajax(python后端接受request.get_json request.get_data()言归正传环境：mac python3，js chrome浏览器...
复制链接

扫一扫

专栏目录