Dash 第60回（DashCanvas 画像表示）

DashCanvas 画像表示

キャンバスに画像を表示します。

画像を表示する手順は、以下の通りです。

  1. imread関数を使って、画像をnumpy.ndarray型に変換する。（7行目）
  2. array_to_data_url関数を使って、文字列に変換する。（7行目）
  3. 文字列に変換した画像データを、DashCanvasの引数 image_contentに設定し、キャンバスに画像を表示する。（13行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import dash
from dash_canvas import DashCanvas
from dash_canvas.utils import array_to_data_url
from skimage import io

# 画像を変数に渡す
data = array_to_data_url(io.imread('cherry.png'))
app = dash.Dash(__name__)           # Dashインスタンスを生成

# レイアウト作成
app.layout = DashCanvas(
    id='image1',
    image_content=data,         # コンポーネントへ画像を設定
    width=500,                  # キャンバスの横幅
    lineWidth=12,               # アノテーションの横幅
    goButtonTitle='Test',       # Saveボタンのタイトル
    lineColor='lime',           # アノテーションの線の色
    hide_buttons=['zoom', 'pan', 'line']   # ボタンを非表示
)

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

キャンバスの横幅や、編集ツールの設定も行っています。（14～18行目）

[ブラウザで表示]

キャンバスに画像が表示され、編集ツールを使って画像を編集することができました。