前回は画像アップロード方式でクライアント画像をサーバに保存する方法を実験しました
今回の実験により,グラフィック画像を直接サーバにアップロードして保存する方法を実現した.
いくつかの概念を検証すれば
js端:base 64転送、json転送、XMLHttpRequest,$.ajax(
pythonバックエンドはrequestを受け入れます.get_json request.get_data()
 
本題にもどる
環境:mac python 3,js chromeブラウザ
 
フロントエンド導入jquery

コードの 、 は の を しないで、 も な だけを とします
キャンバスcanvas=documentが されたことを に っています.getElementById('drawing-board')

    //    
    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];
    }

パネルを直接保存します
2つの方法があります.
ajaxを介してバックグラウンドに転送する対応:request.get_data()  
XMLHttpRequestによるバックグラウンド対応:request.get_json()
取得パネルの要素をbase 64ビットvar imgUrl=canvasに変換する.toDataURL("image/png"); この処理はバックグラウンドでもvar imageDataB 64=imgUrl.substring(22); jsonフォーマットを定義し、バイト変換imgData={uploadImg:imageDataB 64};var senddata = JSON.stringify(imgData);

    

    //    
    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("    ！")
        //     }
        // })

    }

バックエンドコード:app.py
注意して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