記事をシェアしたりするのに、OGイメージがあると圧倒的に映えますよね。
とはいえ、記事毎に画像を作ったりするのもしんどかったりするもの。
別に凝った画像じゃなくていいから、かんたんに生成したい。

ということでかんたんに生成できる仕組みを作りました。

html2canvas を使う

html2canvas は、ブラウザ上に表示されているhtmlをcanvasに変換してくれるライブラリです。

このライブラリを用いて、OGイメージにしたい html を用意してcanvas変換->PNG変換することでOGイメージを生成しています。

具体的には以下の画像のように、ogイメージ生成用のページを用意し、テキストの内容として記事タイトルをデフォルトで渡しています。

テキストを変更することも可能です。

ほとんどの場合は、見た目通りに画像が生成できるのですがたまに変わっちゃうことがあるので、toCanvasボタンでcanvasに変換したときの見た目を確認できます。

問題なければ upload ボタンで GCS（ GoogleCloudStorage）にupload します。

テキストだけの画像であれば、かんたんに作ることが出来るようになりました。

もうちょっとリッチな見た目を求める場合は、background-imageでOGイメージの背景を用意して、その上のいい感じの位置にテキストを持ってくるようにすれば良いと思います。