如何获取streamlit canvas图像数据在终端显示并保存签名绘制内容

你遇到的返回None问题核心由参数配置错误导致：

• 你在st_canvas配置中把update_streamlit设为了False，该参数的作用是控制画布内容是否同步到Streamlit后端，设为False时后端不会主动获取画布的绘制内容，因此canvas_result.image_data永远返回空值。

你可以根据需求选择以下两种修复方案：

方案1：开启实时同步（适合轻量使用场景） #

直接修改update_streamlit参数为True即可实时获取画布数据，参考代码如下：

import streamlit as st
from streamlit_drawable_canvas import st_canvas
import numpy as np
from PIL import Image

def signaturefunk ():
    st.write("Signature")
    canvas_result = st_canvas(
            fill_color="#eee",
            stroke_width=5,
            stroke_color="black",
            background_color="white", # 明确设置背景色可避免透明背景导出异常
            update_streamlit=True, # 核心修改：开启数据同步
            height=200,
            width=700,
            drawing_mode="freedraw",
        )
    # 增加非空判断避免首次加载报错
    if canvas_result.image_data is not None:
        # image_data为RGBA格式的numpy数组，可直接转为PIL图像保存
        sign_img = Image.fromarray(canvas_result.image_data.astype(np.uint8))
        sign_img.save("my_signature.png")
        st.image(sign_img, caption="已保存的签名")
        # 打印数组维度验证数据正常，直接打印全量数组会输出大量内容不建议操作
        print(canvas_result.image_data.shape)

方案2：按钮触发同步（适合需要减少后端刷新频率的场景） #

如果不需要实时同步数据，可以保留update_streamlit=False配置，新增按钮手动触发数据获取：

def signaturefunk ():
    st.write("Signature")
    canvas_result = st_canvas(
            fill_color="#eee",
            stroke_width=5,
            stroke_color="black",
            background_color="white",
            update_streamlit=False,
            height=200,
            width=700,
            drawing_mode="freedraw",
        )
    if st.button("确认保存签名"):
        if canvas_result.image_data is not None:
            sign_img = Image.fromarray(canvas_result.image_data.astype(np.uint8))
            sign_img.save("my_signature.png")
            st.success("签名保存成功")
            print(canvas_result.image_data)
        else:
            st.error("未检测到签名内容，请先在画布绘制后再保存")

额外注意事项 #

• 请确保已安装streamlit-drawable_canvas依赖，版本过低也可能出现数据返回异常，可执行pip install -U streamlit-drawable-canvas升级到最新版本
• 如果不需要透明通道，可在转PIL图像后添加sign_img = sign_img.convert("RGB")，即可保存为jpg格式文件

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