Node.jsでブログサムネを自動生成｜sharp + canvasで画像にテキスト描画
概要
Node.jsで画像にテキストを描画してサムネイルを自動生成する方法について解説していきます。
ブログを書いていると毎回アイキャッチ用のサムネイルを用意することになるのですが、「画像編集ツールを開く → 文字を置く → 書き出す → アップロードする」という一連の作業がとにかく面倒なんですよね（- -;
記事を量産しようとするほど、この地味な手作業がボトルネックになってきます。
そこで今回は背景画像の上に日本語テキストを焼き込んで、コマンド一発でサムネイル画像を吐き出すスクリプトをNode.jsで自作しました。
使うのは画像変換の定番sharpと、文字描画用のcanvasの2つだけです。
実装としてはcanvasで背景＋テキストを合成し、最後にsharpでJPEGとして書き出す、という流れになります。
自動改行や複数行の中央寄せまで入れているので、タイトルが長くてもそれなりに見られるサムネが出来上がります。
この仕組みを一度作ってしまえば、毎回のサムネ作成作業を実質ゼロにできるのでかなりお勧めです。
それではやっていきましょう！