Notionのアイコン画像を正方形に編集するWEBアプリケーションを作った

はじめに： 解決したいこと

みなさん、Notion 使ってますか？
Notionでページを作成していたところ、アイコン画像を設定するときに困ったことが起きました。
それは、長方形の画像をアイコンとしてアップロードすると、下の写真のように画像が見切れてしまうということです。

この記事では、Streamlit を使ってNotionのアイコン用に画像を正方形に加工してくれるWEBアプリケーションを作成したので紹介します。
作成したWEBアプリは こちら から使用できます。
作成したプログラムは こちら。
Streamlitの基本的な使い方については、この記事 で紹介しています。

ソリューション

• OpenCVを使って長方形の画像を正方形に加工
• ( 長辺と短辺の差の半分の長さ ) × ( 長辺 ) の長方形を両側から結合
• Streamlitを使って画像をアップロードすると上記の処理を行ってくれるWEBアプリケーションを作成

実装

コード全体は こちら から。

まず画像をアップロードして、それを読み込みます。

st.markdown('# Notion Icon Maker')
file = st.file_uploader('画像をアップロードしてください', type=['jpg', 'jpeg', 'png'])
if file:
    st.markdown(f'{file.name} をアップロードしました')
    img = Image.open(file)
    st.image(img)

次に画像を正方形に加工します。
アップロードした画像は Pillow の形式で読み込まれているため、画像加工の前に OpenCV 形式に変換します。
また、正方形にするために付け足した部分は透過させる必要があります。
そこで、画像のチャンネル BGRA のうち、Aの値を0にすることで透過画像を作成することができます。
作成した透過画像の中央に、元画像を配置して完成です。

def make_square(image):
    h, w = image.shape[:2]
    a = max(h, w)
    blank = np.full((a, a, 4), 0, dtype=np.uint8)
    blank[int(a / 2 - h / 2):int(a / 2 - h / 2) + h,
          int(a / 2 - w / 2):int(a / 2 - w / 2) + w] = image
    return blank

cv_img = pil2cv(img)
dst = make_square(cv_img)

最後に

作成したWEBアプリケーションを使うことで、下のようにいい感じにアイコンを設定できました。
Notion のアイコン設定で困ったら使ってみてください。