「PythonのGUIアプリで画像を表示したい」
「GUIアプリのデザインや表現に限界を感じている・・・」
このような場合には、この記事の内容が参考となります。
この記事では、PythonのGUIアプリで簡単に画像を表示する方法を解説しています。
本記事の内容
- GUIアプリで簡単画像表示
- 簡単画像表示のシステム要件
- 簡単画像表示の仕組み（仕様）
- 簡単画像表示のサンプルコード
それでは、上記に沿って解説していきます。
GUIアプリで簡単画像表示
犬の画像は、PythonのGUIアプリ上で表示しています。
GUIアプリでは、画像一つ表示するのに苦労します。
苦労する様は、次の記事からも理解できるでしょう。
たった一つの画像を表示するだけ、どうしてこんなに苦労するのでしょうかね・・・
それに対して、Webなんて非常に簡単に画像を表示できます。
どうにかして、その恩恵を受けれないかを考えました。
結論から言うと、pywebviewを使えばWeb世界の恩恵を受けることが可能です。
pywebviewに関しては、次の記事で解説しています。
pywebviewを使えば、GUIアプリでいろんなことができるようになります。
例えば、GUIアプリで綺麗な表を作成することもできます。
これと同じことを画像表示に関してもやろうということです。
なお、このことを実現するために必要となるスキルは以下となります。
- Python
- JavaScript（初級レベル）
あとは、pywebviewについての理解が何よりも必要なります。
一度でも理解できれば、PythonのGUIアプリでの可能性は広がります。
以上、GUIアプリで簡単画像表示について説明しました。
次は、簡単画像表示の仕組みについて確認します。
簡単画像表示のシステム要件
システム要件と言えるモノは、以下。
- pywebview
- python-magic
それぞれを以下で説明します。
pywebview
pywebviewを利用してGUIアプリを作成します。
そのため、pywebviewはインストール必須です。
python-magic
今回は、手元にある次の画像を表示します。
dog.png
そして、この画像をPythonで読み込みます。
読み込んでから、Data URIに変換します。
そのための方法は、次の記事でまとめています。
上記記事にあるpython-magicをインストールします。
python-magicは、画像のMIMEタイプを判定するライブラリです。
以上、簡単画像表示のシステム要件について説明しました。
次は、簡単画像表示の仕組み（仕様）を確認します。
簡単画像表示の仕組み（仕様）
pywebviewを用いて、PythonとWebページの連携を行います。
連携とは、JavaScriptからPythonを実行することを指します。
具体的に言うと、以下の流れになります。
- JavaScriptからPythonに画像のデータ（Data URI）を要求する
- Pythonで画像ファイルをData URIに変換する
- JavaScriptでPythonから戻ってきたData URIをもとに画像を表示する
なお、JavaScriptからPythonを実行する方法については次の記事をご覧ください。
以上、簡単画像表示の仕組み（仕様）について説明しました。
次は、簡単画像表示のサンプルコードを確認します。
簡単画像表示のサンプルコード
pywebviewで読み込むhtmlです。
img.html
<!DOCTYPE html>
<html lang="ja">
<head>
<title>画像表示</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
window.addEventListener('pywebviewready', function() {
pywebview.api.my_exec().then(get_return_from_python);
})
function get_return_from_python(response) {
let img_data_uri = response.img_data_uri;
let img = document.getElementById("img_target");
img.src = img_data_uri;
}
</script>
</head>
<body>
<img id="img_target">
</body>
</html>
Pythonのコードは、以下となります。
import webview
import base64
import magic
from pathlib import Path
IMG = "dog.png"
HTML = "img.html"
class Api:
def __init__(self):
self.name = "js_api"
def my_exec(self):
img_data_uri = get_data_uri(IMG)
response = {
'img_data_uri': img_data_uri
}
return response
def get_data_uri(path):
with open(path, "rb") as image_file:
# bufに格納
buf = image_file.read()
# base64のdata取得
data = base64.b64encode(buf)
data_str = data.decode('utf-8')
# MIMEタイプ取得
mime_type = magic.from_buffer(buf, mime=True)
# Data URI
data_uri = "data:" + mime_type + ";base64," + data_str
return data_uri
return None
if __name__ == '__main__':
html = Path(HTML).read_text(encoding="utf-8")
api = Api()
window = webview.create_window('GUIアプリで簡単画像表示', html=html, js_api=api, width=600, height=400)
webview.start()
img.htmlは、Webサーバ上に設置しても構いません。
それをURL指定で読み込む形でも問題ないです。
ソースを見て不明な点があれば、紹介した記事をご覧ください。
