OpenCV画像表示のサイトはあるがPIL画像表示はなかったので書いておきます。
PILで取得した画像をbase64にしてimgタグのsrcに設定するだけです。
目次
Python側の実装
PILで読み込んだ画像をbase64にエンコードしてその結果をjavascript側に渡すだけ。
import eel
from PIL import Image
import base64
from io import BytesIO
# 画像読み込み
@eel.expose
def fetch_image():
image: Image.Image = Image.open(<ファイルパス>)
image = image.convert("RGB")
buffered = BytesIO()
image.save(buffered, format="JPEG")
img_str = base64.b64encode(buffered.getvalue())
img_src = f"data:image/jpeg;base64,{str(img_str)[2:-1]}"
eel.set_image(img_src) # javascript側の画像表示関数を呼ぶ
eel.init("web", allowed_extensions=['.js', '.html', '.css'])
eel.start("index.html", port=9999)HTML/JavaScript側の実装
eel.fetch_imageでPython側の画像読み込み関数を呼び出し、Python側から画像設定関数のset_imageが呼び出される感じ。
imgタグのsrcに設定するだけ。
webディレクトリ下に以下のコードをindex.htmlとしておいてください。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="/eel.js"></script>
<script>
eel.expose(set_image);
function set_image(image) {
document.getElementById("image").src = image;
}
eel.fetch_image()
</script>
</head>
<body>
<img id="image" width="500" height="500">
</body>
</html>実行結果
以下のコマンドでこんな結果が表示されるはずです。
python app.py
EelでVueを使うやり方について他記事にまとめてるのでよかったら見てみてください。
数少ないEel関連の情報色々まとめているのでよかったら見てみてください！