
本文将深入探讨如何在 Flet 应用程序中实现图像的动态更新。关键在于,当图像文件名保持不变时,需要确保 Flet 重新加载图像数据。 核心思路是每次更新时都重新读取图像文件,将其转换为 base64 编码的字符串,然后更新 ft.Image 组件的 src_base64 属性。 这种方法可以有效绕过缓存机制,确保显示最新的图像内容。
解决方案:使用 base64 编码和 src_base64 属性
Flet 的 Image 组件提供了 src_base64 属性,允许直接使用 base64 编码的字符串来显示图像。 结合图像处理库 PIL (Pillow) 和 NumPy,我们可以轻松地将图像文件转换为 base64 编码的字符串,并在需要更新图像时,重新生成并设置该字符串。
以下是实现动态更新图像帧的完整示例代码:
import numpy as np
import base64
import flet as ft
from flet import Image
from io import BytesIO
from PIL import Image as image
image_path = r"Python\\plate_0.jpg" # 初始图像路径
pil_photo = image.open(image_path) # 使用 Pillow 打开图像
arr = np.asarray(pil_photo) # 将图像转换为 NumPy 数组
pil_img = image.fromarray(arr) # 将 NumPy 数组转换回图像
buff = BytesIO() # 创建内存缓冲区
pil_img.save(buff, format="JPEG") # 将图像保存到缓冲区
def main(page= ft.Page):
image_string = base64.b64encode(buff.getvalue()).decode('utf-8')
image1 = Image(src_base64=image_string)
page.window_width = 375
page.window_height = 300
def updateTest(value):
image_path = r"Python\\plate_0.jpg" # 重新读取图像路径
pil_photo = image.open(image_path)
arr = np.asarray(pil_photo)
pil_img = image.fromarray(arr)
buff = BytesIO()
pil_img.save(buff, format="JPEG")
newstring = base64.b64encode(buff.getvalue()).decode("utf-8")
image1.src_base64 = newstring
image1.update() # 更新图像
page.add(
ft.Row(controls=[
image1
], alignment='center'),
ft.Row(controls=[
ft.TextButton("Test", on_click=updateTest)
], alignment='center')
)
ft.app(target=main)代码解释:
- 导入必要的库: 导入 numpy, base64, flet, io.BytesIO, 和 PIL.Image。
- 初始化图像: 使用 PIL 打开图像,将其转换为 NumPy 数组,再转换回图像对象,并保存到内存缓冲区。 然后将缓冲区内容编码为 base64 字符串。
- 创建 Flet 应用: 创建 Image 组件,并使用初始的 base64 字符串设置 src_base64 属性。
- 定义更新函数: updateTest 函数负责重新读取图像文件,将其转换为 base64 字符串,并更新 Image 组件的 src_base64 属性。
- 添加组件到页面: 将 Image 组件和一个按钮添加到页面。 点击按钮会触发 updateTest 函数,从而更新图像。
注意事项:
- 确保已安装 flet 和 pillow 库。 可以使用 pip install flet pillow 命令安装。
- 将 image_path 变量替换为实际的图像文件路径。
- updateTest 函数中的 image_path = r"Python\\plate_0.jpg" 这一行至关重要。 每次更新时,都需要重新声明图像路径,以便 Flet 重新加载图像数据。
- image1.update() 语句是更新图像显示的关键。
总结:
通过使用 base64 编码和 src_base64 属性,我们可以有效地在 Flet 应用程序中实现图像的动态更新,即使图像文件名保持不变。 这种方法简单易用,并且可以确保 Flet 应用能够正确显示最新的图像内容。 记住,每次更新时都需要重新读取图像文件,并更新 src_base64 属性。










