Eel で 画像データを相互変換する

import asyncio
import eel

async def main():
    eel.init('web')
    eel.start('index.html', port=0, size=(450, 560))
    pass

if __name__ == '__main__':
    try:
        asyncio.run(main())
    except Exception:
        pass

async get_img() {
    // Pythonから画像データ(Base64文字列)を読み込む
    const img_base64 = await eel.get_img()();

    // 画面に表示
    this.img_src = 'data:image/png;base64,' + img_base64;
},

@eel.expose
def get_img():
    # ファイルを開くダイアログの表示
    filename = filedialog.askopenfilename(
        title="画像ファイルを開く",
        filetypes=[("Image file", ".bmp .png .jpg .tif")],
        initialdir="./"
    )

    # 画像ファイルを開いてbase64に変換
    with open(filename, 'br') as f1:
        img_base64 = base64.b64encode(f1.read())

    # base64を文字列で返却
    return img_base64.decode()

async gray_scale() {
    let img = this.img_src;
    img = img.replace('data:image/png;base64,', '');

    // Pythonでグレースケール変換
    const img_base64 = await eel.gray_scale(img)();

    // 画面に表示
    this.img_src = 'data:image/png;base64,' + img_base64;
}

@eel.expose
def gray_scale(img_str: str):
    # バリナリデータ <- Base64文字列
    img_binary: bytes = base64.b64decode(img_str)

    # バイナリーストリーム <- バリナリデータ
    img_binarystream: io.BytesIO = io.BytesIO(img_binary)

    # PILイメージ <- バイナリーストリーム
    img_pil: Image = Image.open(img_binarystream)

    # numpy配列(RGBA) <- PILイメージ
    img_numpy: np.ndarray = np.asarray(img_pil)

    # numpy配列(GRAY) <- numpy配列(RGBA)
    img_gray: np.ndarray = cv2.cvtColor(img_numpy, cv2.COLOR_RGBA2GRAY)

    # Base64 <- numpy配列(GRAY)
    result, dst_data = cv2.imencode('.png', img_gray)
    img_base64: bytes = base64.b64encode(dst_data)

    # base64を文字列で返却
    return img_base64.decode()