ipywidgets 容器小部件中的 PIL 图像

我有一些来自某个图书馆的 PIL 图像，并尝试了解它发生了什么。为此，我计算一些值，调用库并查找图片。我对计算值感兴趣。我使用带有一些滑块的 jupyter 笔记本与库进行交互。这是我的代码的一个非常简短的示例：

    from PIL import Image, ImageDraw
    import ipywidgets
    
    def explore_call(width, height, foo, bar):
        # some very important computation
        essential_value_one = width - foo
        essential_value_two = height - bar
        # output interim results
        print(f"{essential_value_one=}, {essential_value_two=}")
        # mimic PIL image return from a library
        image = Image.new(mode="RGB", size=(width, height), color="black")  
        draw = ImageDraw.Draw(image)
        draw.rectangle(xy=(foo, bar, essential_value_one, essential_value_two))
    
        return image
    
    ipywidgets.interact(explore_call,
                        width=ipywidgets.IntSlider(min=10, max=200, step=1, value=100),
                        height=ipywidgets.IntSlider(min=10, max=200, step=1, value=100),
                        foo=ipywidgets.IntSlider(min=0, max=20, step=1, value=10),
                        bar=ipywidgets.IntSlider(min=0, max=20, step=1, value=10),
                       )

这还不错。 Jupyter 笔记本显示返回的图像，但我希望将其放入 ipywidgets 容器小部件中，用其他小部件替换打印，进行一些基本布局。我找到了 ipywidgets.Image ，但无法正确实例化它（我尝试将PIL图像保存到 io.StringIO 缓冲区中，然后将其值传递到 ipywidgets.Image 中，但没有成功）。那么，如何将 PIL 图像包装在小部件中呢？

走在正确的轨道上，可以使用 io.StringIO 将 PIL 图像嵌入到 ipywidgets.Image 中。只需确保使用 .getvalue() 方法从 io.BytesIO 对象中提取字节数据即可。

以下是如何修改代码以将 PIL 图像显示在 ipywidgets.Image 窗口小部件中的方法：

from PIL import Image, ImageDraw
import ipywidgets
from io import BytesIO

def explore_call(width, height, foo, bar):
    # 一些非常重要的计算
    essential_value_one = width - foo
    essential_value_two = height - bar

    # 将中间结果输出到小部件
    output_widget.clear_output()
    with output_widget:
        print(f"{essential_value_one=}, {essential_value_two=}")

    # 模拟从库返回的 PIL 图像
    image = Image.new(mode="RGB", size=(width, height), color="black")  
    draw = ImageDraw.Draw(image)
    draw.rectangle(xy=(foo, bar, essential_value_one, essential_value_two))

    # 将 PIL 图像转换为字节流
    buf = BytesIO()
    image.save(buf, format='PNG')

    # 创建 ipywidgets.Image 并显示
    image_widget.value = buf.getvalue()

# 创建小部件
image_widget = ipywidgets.Image(format='png')
output_widget = ipywidgets.Output()

# 使用 interact 函数创建交互式控件
ipywidgets.interact(
    explore_call,
    width=ipywidgets.IntSlider(min=10, max=200, step=1, value=100),
    height=ipywidgets.IntSlider(min=10, max=200, step=1, value=100),
    foo=ipywidgets.IntSlider(min=0, max=20, step=1, value=10),
    bar=ipywidgets.IntSlider(min=0, max=20, step=1, value=10),
)

# 显示图像和小部件
ipywidgets.VBox([image_widget, output_widget])

在此代码中：

1. 我们创建了两个小部件： image_widget 用于显示图像， output_widget 用于显示打印语句。
2. 在 explore_call 函数中，我们将打印语句重定向到 output_widget 。
3. 我们使用 BytesIO 将 PIL 图像保存为 PNG 格式的字节流。
4. 使用 .getvalue() 从 BytesIO 对象中提取字节数据，并将其分配给 image_widget.value 以显示图像。
5. 最后，我们使用 ipywidgets.VBox 将图像和小部件垂直排列。

现在，的 Jupyter Notebook 将在交互式滑块下方显示图像和打印输出。