如何在EEL中将Canvas绘制的图片传递给Python脚本并自动保存

1. 前端JS端修改 #

首先修正你现有代码的笔误：你定义的canvas变量是the_canvas，获取上下文时误用了未定义的变量c。绘图完成后直接将canvas转成base64格式的图片数据，调用Python端暴露的保存方法即可：

// 修正后的绘图代码
var the_canvas = document.getElementById("myCanvas");
var ctx = the_canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.closePath();
ctx.lineWidth = 5;
ctx.stroke();

// 新增：绘图完成后自动传递数据到Python端
const imageBase64 = the_canvas.toDataURL("image/png");
// 调用Python端暴露的保存函数
eel.save_canvas_image(imageBase64)();

2. Python端实现 #

你需要先暴露一个供JS调用的保存函数，接收base64数据后解码写入本地文件即可：

import eel
import base64
import os

# 初始化Eel，参数为前端HTML/JS文件的存放目录，示例假设前端文件都放在web文件夹下
eel.init("web")

# 用装饰器暴露函数，供JS端直接调用
@eel.expose
def save_canvas_image(base64_data):
    # 去掉base64数据的标识前缀
    _, encoded_content = base64_data.split(",", 1)
    # 解码为图片二进制数据
    img_binary = base64.b64decode(encoded_content)
    # 自定义保存路径，示例默认保存在当前工作目录
    save_path = os.path.join(os.getcwd(), "canvas_output.png")
    # 写入本地文件
    with open(save_path, "wb") as f:
        f.write(img_binary)
    print(f"图片已自动保存到：{save_path}")

# 启动Eel应用，参数为入口HTML文件名，可自定义窗口尺寸
eel.start("index.html", size=(800, 600))

注意事项 #

• 前端页面必须引入Eel自动生成的依赖文件，在HTML的<head>或<body>末尾添加<script src="/eel.js"></script>即可
• 如果需要保存为JPG格式，只需将JS中的toDataURL("image/png")改为toDataURL("image/jpeg", 0.9)，第二个参数为JPG画质系数（取值范围0-1）
• 保存路径可根据需求自行修改，支持绝对路径和相对路径

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