python – 散景：使用Hovertool显示图像

2019-07-11 06:58:33 阅读：174 来源： 互联网

我正在模仿Hovertool示例here,其中hovertool显示蛇的图像.我自己的数据包括人名和他们的个人资料图片.我有一个所有配置文件图片的本地目录,所以每当我得到一个名称列表,names_ls,我有一个方法get_profile_pics将搜索该目录*以查找与该列表上的名称相关联的配置文件图片.

请注意,在蛇示例中(为方便起见,下面转载的示例中的代码),图像imgs作为html url存储在ColumnDataSource数据字典中.我想尝试显示存储在本地驱动器上的图像,我怎么能这样做呢？

一些指示：

>假设我将永远有一张我给出的任何名字的个人资料照片.许多人可以使用相同的名称,但get_profile_pics会处理这个问题.
>我想在一个jupyter笔记本中运行所有这些.
>图片是.pngs,我也将这些个人资料图片保存为.npy文件,如果有帮助的话.
>由于隐私问题,我不想在网络上托管图像以使用html标签进行检索.

Snakes Hovertool示例代码

source = ColumnDataSource(
        data=dict(
            x=[1, 2, 3, 4, 5],
            y=[2, 5, 8, 2, 7],
            desc=['A', 'b', 'C', 'd', 'E'],
            imgs = [
                'http://bokeh.pydata.org/static/snake.jpg',
                'http://bokeh.pydata.org/static/snake2.png',
                'http://bokeh.pydata.org/static/snake3D.png',
                'http://bokeh.pydata.org/static/snake4_TheRevenge.png',
                'http://bokeh.pydata.org/static/snakebite.jpg'
            ]
        )
    )

hover = HoverTool(
        tooltips="""
        <div>
            <div>
                <img
                    src="@imgs" height="42" alt="@imgs" width="42"
                    style="float: left; margin: 0px 15px 15px 0px;"
                    border="2"
                ></img>
            </div>
        <...other div tags for text>
        """
    )

我尝试了各种格式：作为PIL.Image图像,作为np.arrays,以及作为字节. tldr：这些都不起作用.我的代码,为了完整性：

list_of_pics_PIL = [...]
list_of_pics_np = [...]
list_of_pics_png = [...]
type(list_of_pics_PIL[0]) #PIL.Image.Image
type(list_of_pics_np[0]) #numpy.ndarray
type(list_of_pics_png[0]) #bytes

selected_pics_PIL = get_profile_pics(names_ls, list_of_pics_PIL)
selected_pics_np = get_profile_pics(names_ls, list_of_pics_np)
selected_pics_png = get_profile_pics(names_ls, list_of_pics_png)

source = ColumnDataSource(
        data=dict(
            names = list_of_names,
            height = person_height,
            pics = selected_pics_<format>
            )
       )

hover = HoverTool(
        tooltips="""
        <div>
            <div>
                <img
                    src="@pics" height="42" alt="@imgs" width="42"
                    style="float: left; margin: 0px 15px 15px 0px;"
                    border="2"
                ></img>
            </div>
        <...other div tags for text>
        """
    )

解决方法:

用file：// @ pics替换@pics并享受.

标签：python,bokeh
来源： https://codeday.me/bug/20190711/1429733.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

python – 散景：使用Hovertool显示图像