Tweet Image Generatorを公開しました

Kindle本を紹介するTwitterのbotを運用しています。

このbotでは書影と紹介文をひとつの画像に合成してツイートしています。この画像は縦横比が16:9で、ツイッターのタイムラインで全表示されます。この画像を作者の方が流用されているのを何度か見かけました。需要がありそうなので、誰でも簡単に作れるアプリを開発しました。

https://tig.4486.biz/

技術的にはCanvasに画像とHTMLを描画して、画像としてダウンロードしています。

Canvasでの画像の移動や拡大には、Fabricというライブラリを利用しています。

Fabric.js Javascript Canvas Library

HTMLの入力にはCKEDITOR 4というライブラリを利用しています。

CKEditor 4 – The battle-tested WYSIWYG HTML editor

HTMLの描画は、以下のサイトを参考にしました。この仕組だとブラウザの機能だけでHTMLの描画が可能になります。

DOM オブジェクトを Canvas に描画する