使用 Flet 刷新动态更新的图片

本文将介绍在使用 Flet 框架开发应用时，如何实现动态更新图片的功能。当图片文件在操作系统层面被替换，但文件名保持不变时，传统的 page.update() 方法可能无法正确刷新图片显示。本文将提供一种解决方案，通过重新读取图片文件并将其转换为 base64 编码，从而强制 Flet 重新加载最新的图片内容，实现动态更新。

在 Flet 应用中动态更新图片，尤其是在图片内容由外部程序实时修改的情况下，可能会遇到一些挑战。当图片文件名保持不变，但图片内容被外部程序更新时，直接使用 ft.Image 组件和 page.update() 方法可能无法立即反映最新的图片内容。这是因为 Flet 可能会缓存图片，导致即使文件内容已更改，显示的仍然是旧版本。

以下是一种解决方案，通过重新读取图片文件并将其转换为 base64 编码，然后更新 ft.Image 组件的 src_base64 属性，从而强制 Flet 重新加载最新的图片内容。

示例代码：

import numpy as np
import base64
import flet as ft
from flet import Image
from io import BytesIO
from PIL import Image as image

def main(page: ft.Page):
    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")  # 将图片保存到缓冲区

    image_string = base64.b64encode(buff.getvalue()).decode('utf-8')  # 将缓冲区内容编码为 base64 字符串
    image1 = Image(src_base64=image_string)  # 创建 Image 组件，使用 base64 字符串作为源

    page.window_width = 375
    page.window_height = 300

    def updateTest(e):
        nonlocal image1 # allow to modify image1
        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")  # 重新编码为 base64 字符串
        image1.src_base64 = newstring  # 更新 Image 组件的 src_base64 属性

        image1.update()  # 更新 Image 组件

    page.add(
        ft.Row(controls=[image1], alignment='center'),
        ft.Row(controls=[ft.TextButton("Test", on_click=updateTest)], alignment='center')
    )

ft.app(target=main)

代码解释：

绘蛙-多图成片

绘蛙新推出的AI图生视频工具

48

查看详情

1. 导入必要的库： 导入 numpy, base64, flet, io, 和 PIL 库。
2. 读取图片并转换为 base64：
   • 使用 PIL.Image.open() 打开图片文件。
   • 使用 numpy.asarray() 将图片转换为 NumPy 数组。
   • 使用 PIL.Image.fromarray() 从 NumPy 数组创建图片对象。
   • 使用 io.BytesIO() 创建一个内存缓冲区。
   • 使用 pil_img.save() 将图片保存到缓冲区，指定格式为 "JPEG"。
   • 使用 base64.b64encode() 将缓冲区内容编码为 base64 字符串，并使用 decode('utf-8') 解码为 UTF-8 字符串。
3. 创建 ft.Image 组件： 使用 base64 字符串作为 src_base64 属性的值，创建一个 ft.Image 组件。
4. 定义更新图片的函数 updateTest()：
   • 在该函数中，重新执行步骤 2，读取最新的图片文件并转换为 base64 字符串。
   • 更新 ft.Image 组件的 src_base64 属性为新的 base64 字符串。
   • 调用 image1.update() 方法，更新 ft.Image 组件，使其显示最新的图片内容。
5. 添加组件到页面： 将 ft.Image 组件和一个 ft.TextButton 组件添加到页面上。点击按钮时，会调用 updateTest() 函数，更新图片。

注意事项：

• 确保安装了必要的库：pip install flet Pillow numpy。
• 将 image_path 变量设置为实际的图片文件路径。
• 这种方法每次更新图片都需要重新读取文件和编码，可能会影响性能。如果需要频繁更新图片，可以考虑使用其他方法，例如使用 ft.ImageProvider 或使用网络流。
• 确保图片文件格式是 PIL 支持的格式。
• 在 updateTest 函数中，需要重新声明 image_path 变量，以确保每次都读取最新的文件。

总结：

通过将图片文件转换为 base64 编码，并更新 ft.Image 组件的 src_base64 属性，可以实现动态更新图片的功能，即使图片文件名保持不变。这种方法简单易懂，适用于大多数场景。但是，需要注意性能问题，并根据实际情况选择合适的更新策略。

以上就是使用 Flet 刷新动态更新的图片的详细内容，更多请关注php中文网其它相关文章！