python - 如何使用 python 在交互式破折号中显示本地图像
问题描述
所以我正在研究 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 的新手。我不知道该怎么做。我试图研究它,但找不到任何有用的东西。任何人都可以帮忙吗?
解决方案
您可以将回调更改为以下内容:
@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
我们的按钮的),我们将显示图形和图像。
推荐阅读
- angular - 为什么 Angular 版本未定义?
- c - 输入错误后循环返回,fgetc(stdin) 和循环出现问题
- java - 本地方法调用时的 java.lang.UnsatisfiedLinkError
- ios - 在表格视图单元格上显示随机图像的正确方法是什么
- android - 如何在 AndroidX 上迁移
- python-3.x - scrapy cralwer 无法解析 mysql 数据库中的数据
- xamarin - 如何实现包含数据过滤器的弹出窗口
- sql - 两个聚合在一个交叉应用可能吗?
- excel - 参数不是可选的 VBA 计数
- python - django中的post方法