OpenCV・PILを使ってブログアイコン(favicon)を作ってみた。

前回、ブログアイコンを作るためにOpenCVをインストールしました。

今回は実際にブログアイコンを作ってみました。

最新版(2018/12/26)は以下の記事参照
www.kinacon-blog.work

【ブログアイコンについては以下】
ブログアイコン（favicon）を高精細ディスプレイに対応するなど、見やすく表示されるようにしました - はてなブログ開発ブログ

ブログアイコンを作るに当たって、問題が発覚しました。

問題

OpenCVでひらがなの描画ができなかった
ひらがなの良いフォントがなかった

解決方法

PIL(最初から入ってました)を使用する
フリーの日本語フォントをダウンロードする

フォントのダウンロード

以下のサイトより、源の角ゴシックLをダウンロードしています。

源柔ゴシック (げんじゅうゴシック) | 自家製フォント工房

コード

PILで日本語を入力するところは以下のサイト参考にしました。

【OpenCV】【Python】画像上に日本語のテキストを描画 - Qiita

ブログアイコンのサイズは64×64が最大らしいのでこのサイズで作りました。

スマートフォン（iPhone、Android）のホーム画面の
ショートカットは192×192になるので
結局、192×192にしておけばよいのかな？

わたしは、スマホは別にいいので今回は64×64で作りました。
(cv2.resizeでサイズは変えられる)

# -*- coding: utf-8 -*-

import cv2
import numpy as np
from PIL import ImageFont, ImageDraw, Image

#色はBGRで設定する

def put_jtext(bgr_img, text, point, font_size, color):
    # 日本語フォントを画像に描画する
    font_path = "/home/kina/genjyuugothic-l/GenJyuuGothicL-Bold.ttf"
    font = ImageFont.truetype(font_path, font_size)
    #PILはRGBで処理
    color_rgb = color[-1::-1]
    
    rgb_img = cv2.cvtColor(bgr_img, cv2.COLOR_BGR2RGB)
    pil_img = Image.fromarray(rgb_img)
    draw = ImageDraw.Draw(pil_img)
    draw.text(point, text, fill=color_rgb, font=font)
    rgb_img = np.asarray(pil_img)
    bgr_img = cv2.cvtColor(rgb_img, cv2.COLOR_RGB2BGR)
    
    return bgr_img

# ベース画像を作成
width = 360
height = 360
base_img = np.zeros((height, width, 3), np.uint8)

# デザイン
# 背景を黄色にする
color = (0,255,255); # 黃
base_img[:] = tuple(color)

# 文字を書く
text1 = u"きな"
text2 = u"こ"
point1 = (width/2-140,height/2-140)
point2 = (width/2-70,height/2-20)
red = (0, 0, 255) #赤
font_size = 140
dst_img1 = put_jtext(base_img, text1, point1, font_size, red)
dst_img2 = put_jtext(dst_img1, text2, point2, font_size, red)

# 円を書く
cv2.circle(dst_img2, (width/2, height/2), 160, red, 20)

# リサイズする
size = (64,64)
dst64 = cv2.resize(dst_img2,size)

cv2.imwrite('favicon_64.jpg', dst64)