javascript/canvas/axiosで画像をPOSTしてpython/flaskで画像を受け取る

javascript/canvas/axiosで画像をPOSTしてpython/flaskで画像を受け取る:

メモ

Javascript側(抜粋)

const canvas = this.$refs.imageLayer; 
const base64_png = canvas.toDataURL("image/png"); 
const fd = new FormData(); 
fd.append("image", base64_png); 
const BASE_URL = "http://127.0.0.1:5000"; 
axios 
  .post(BASE_URL, fd) 
  .then(function (response) { 
    console.log("response", response); 
  }) 
  .catch(function (error) { 
    console.log(error); 
  }); 

Python(Flask)側

import os 
from flask import Flask, make_response, request 
from flask_cors import CORS 
from pathlib import Path 
import base64 
from PIL import Image 
from io import BytesIO 
 
app = Flask(__name__) 
CORS(app) 
 
@app.route('/', methods=['POST']) 
def send(): 
    if request.method != 'POST': 
        return make_response(jsonify({'result': 'invalid method'}), 400) 
    base64_png = request.form['image'] 
    code = base64.b64decode(base64_png.split(',')[1])  # remove header 
    image_decoded = Image.open(BytesIO(code)) 
    image_decoded.save(Path(app.config['UPLOAD_FOLDER']) / 'image.png') 
    return make_response(jsonify({'result': 'success'})) 

base64のデータにdata:image/png;base64,kpvdfkg... のような形でヘッダっぽいものがついてくるので,split(',')を使っている