基于Flask的JavaScript绘图应用：如何将画布图片传回服务器？

你已经实现了客户端绘图和本地下载功能，要把图片传回Flask服务器，只需修改前端上传逻辑并添加后端接收接口，具体步骤如下：

一、修正前端JavaScript的上传逻辑 #

将原来的本地下载逻辑替换为向Flask服务器发送图片数据的请求，同时修正toDataURL的拼写错误：

const canvas = document.getElementById("canvas")
canvas.height = window.innerHeight
canvas.width = window.innerWidth

const ctx = canvas.getContext("2d")

let prevX = null
let prevY = null

ctx.lineWidth = 5

let draw = false

let clearBtn = document.querySelector(".clear")
clearBtn.addEventListener("click", () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
})

let saveBtn = document.querySelector(".save")
saveBtn.addEventListener("click", async () => {
    // 修正拼写错误：imag/png → image/png
    let dataUrl = canvas.toDataURL("image/png")
    // 提取base64核心数据，去掉前缀标识
    const base64Data = dataUrl.replace("data:image/png;base64,", "")

    try {
        const response = await fetch("/upload-image", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({ image: base64Data })
        })

        const result = await response.json()
        if (result.success) {
            alert("图片上传成功！")
        } else {
            alert("图片上传失败：" + result.message)
        }
    } catch (error) {
        alert("上传出错：" + error.message)
    }
})

window.addEventListener("mousedown", (e) => draw = true)
window.addEventListener("mouseup", (e) => draw = false)

window.addEventListener("mousemove", (e) => {
    if(prevX == null || prevY == null || !draw){
        prevX = e.clientX
        prevY = e.clientY
        return
    }

    let currentX = e.clientX
    let currentY = e.clientY

    ctx.beginPath()
    ctx.moveTo(prevX, prevY)
    ctx.lineTo(currentX, currentY)
    ctx.stroke()

    prevX = currentX
    prevY = currentY
})

二、修改Flask后端代码，添加上传接收接口 #

在原有代码基础上新增接收路由，负责解码base64数据并保存到服务器本地：

from flask import Flask, render_template, request, jsonify
import base64
import os

app = Flask(__name__)
dirweb = "templates/"
# 确保图片保存目录存在，不存在则自动创建
UPLOAD_FOLDER = "uploaded_images"
os.makedirs(UPLOAD_FOLDER, exist_ok=True)

app = Flask(__name__, template_folder=dirweb)

@app.route("/")
def hello_world():
    return render_template("index.html")

@app.route("/upload-image", methods=["POST"])
def upload_image():
    try:
        data = request.get_json()
        image_base64 = data.get("image")
        
        if not image_base64:
            return jsonify({"success": False, "message": "未收到图片数据"})
        
        # 解码base64格式的图片数据
        image_data = base64.b64decode(image_base64)
        # 生成随机文件名避免重复
        filename = f"{UPLOAD_FOLDER}/sketch_{os.urandom(8).hex()}.png"
        
        with open(filename, "wb") as f:
            f.write(image_data)
        
        return jsonify({"success": True, "message": "图片保存成功", "filename": filename})
    except Exception as e:
        return jsonify({"success": False, "message": str(e)})

if __name__ == "__main__":
    app.run(debug=True)

三、补充说明 #

• 确保前端HTML中存在.clear和.save按钮，可在canvas标签附近添加：

  <button class="clear">清空画布</button>
  <button class="save">上传图片</button>
  

• 生产环境建议关闭debug=True，并添加文件大小限制、格式校验等安全措施
• 可根据需求调整图片保存路径和命名规则

内容的提问来源于stack exchange，提问作者user20838374