时间戳

首页 > 解决方案 > 在小部件后面的 Jupyter 笔记本中显示图像

javascript - 在小部件后面的 Jupyter 笔记本中显示图像

问题描述

我正在为 Jupyter Notebook 开发一个自定义小部件。当用户打开他们的笔记本时，小部件不会自动加载，主要是因为在内核中找不到小部件状态。手头的功能是显示图像，直到笔记本加载。

我已确定包含以下内容的单元格：

from IPython.display import Image
img = Image(filename="eggsnspam.png", width=500)
display(img)

当用户加载笔记本时，将正确地重新加载其图像。

小部件中包含用于生成小部件的 PNG“快照”图像的代码。我想展示这张图片：

  1. 当用户加载笔记本并且小部件状态不可用时，用户会看到序列化的图像。
  2. 当用户运行生成小部件的单元格时，用户看到的是小部件而不是图像。

我曾尝试研究几种动态显示或隐藏图像的方法，但没有任何效果。我相信最有前途的未尝试方法是将图像和小部件显示在输出单元格中的同一位置，以 Z 顺序将小部件呈现在图像前面。但是我不知道如何布置这两个来实现这一点。

有必要在小部件 JS 和/或 Python 代码中进行管理，而不是在笔记本中的代码单元中进行管理。此外，小部件没有background属性，我还没有学会如何创建一个。（在我参与这个项目之前的讨论喜欢将背景设置为所需图像的想法。）

标签： javascriptpythonjupyter-notebook

解决方案

jp_doodle 画布小部件具有“快照”功能，可存储画布的图像。我认为您可以使用它来做您所描述的事情。

请参见：

https://nbviewer.jupyter.org/github/AaronWatters/jp_doodle/blob/master/notebooks/Feature%20demonstrations/Snapshot.ipynb

来自 jp_doodle 小部件实现

https://github.com/AaronWatters/jp_doodle

其中有许多在画布中显示图像的示例。

推荐阅读