如何使用 python 在交互式破折号中显示本地图像

Question

所以我正在开发 Dash Plotly。网页应该有一个文本框和一个按钮。这个想法是当我写一个图像名称然后选择按钮时，它将显示本地目录中的图像。

我试着把整个作品分成两部分。

首先，我有这段代码，它会显示你在文本框中输入的任何内容，然后单击按钮。代码：

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import os 
from PIL import Image
import numpy as np
import plotly.express as px

os.chdir(os.path.dirname(os.path.abspath(__file__)))

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    [
        html.I("Try typing the image name in input and observe it"),
        html.Br(),
        dcc.Input(id="input", type="text", placeholder=""),
        html.Div(id="output"),
    ]
)


@app.callback(
    Output("output", "children"),
    Input("input", "value")
)
def update_output(input):
    return u'Input {}'.format(input)


if __name__ == "__main__":
    app.run_server(debug=True)

接下来，我有这段代码，当在本地运行时，它只会显示网页中的图像。要点：python文件和图像在同一个本地目录中。代码：

import os 

from PIL import Image
import numpy as np
import plotly.express as px

# Change working dir to current running script dir:
print('[change directory]')
os.chdir(os.path.dirname(os.path.abspath(__file__)))

def test():
    # load the image
    img = np.array(Image.open('img name.tiff'))

    fig = px.imshow(img, color_continuous_scale='gray')
    fig.update_layout(coloraxis_showscale=False)
    fig.update_xaxes(showticklabels=False)
    fig.update_yaxes(showticklabels=False)
    fig.show()

test()

现在，我需要一种方法来添加这两个代码，以便当我在文本框中输入“img name.tiff”并选择按钮时，它会显示网页中的图片。

我是 Dash 和 Plotly 的新手。我不知道该怎么做。我试图研究它，但找不到任何有用的东西。有人可以帮忙吗？

Answer 1

你可以把你的回调改成这样：

@app.callback(Output("output", "children"), Input("input", "value"))
def update_output(input):
    if not input:
        raise PreventUpdate

    try:
        img = np.array(Image.open(f"assets/{input}"))
    except OSError:
        raise PreventUpdate

    fig = px.imshow(img, color_continuous_scale="gray")
    fig.update_layout(coloraxis_showscale=False)
    fig.update_xaxes(showticklabels=False)
    fig.update_yaxes(showticklabels=False)

    return dcc.Graph(figure=fig)

如果没有输入值或者用户指定路径的图片无法打开，我们使用PreventUpdate：

在某些情况下，您不想更新回调输出。您可以通过在回调函数中引发 PreventUpdate 异常来实现此目的。

注意：此示例假定图像存储在assets 文件夹中。

更新：使用按钮实现

@app.callback(
    Output("output", "children"),
    Input("input", "value"),
    Input("show-image", "n_clicks"),
    prevent_initial_call=True,
)
def update_output(input, n_clicks):
    if not input:
        raise PreventUpdate

    ctx = dash.callback_context
    if ctx.triggered[0]["prop_id"].split(".")[0] != "show-image":
        raise PreventUpdate

    try:
        img = np.array(Image.open(f"assets/{input}"))
    except OSError:
        raise PreventUpdate

    fig = px.imshow(img, color_continuous_scale="gray")
    fig.update_layout(coloraxis_showscale=False)
    fig.update_xaxes(showticklabels=False)
    fig.update_yaxes(showticklabels=False)

    return dcc.Graph(figure=fig)

在前面关于查找可以打开的图像的示例中，回调返回带有图像的图形。如果您想推迟显示图像，直到单击按钮，您可以在布局中添加一个按钮

html.Button("Show Image", id="show-image", n_clicks=0)

并使用callback_context 来确定是哪个Input 触发了该按钮。如果此输入的id 等于"show-input"（我们按钮的id），我们将显示图形和图像。