どうもこんにちは、@y_temp4です。
最近、趣味で個人開発している Web サービスの AnyMake にて、画像を動的に生成するプログラムを書く機会があったのでその方法についてまとめてみます。
関連記事：埋め込みコンテンツを追加しました！｜ AnyMake ｜ note
node-html-to-image を使う
自分は画像生成周りは全然詳しくないのですが、普段フロントエンドのコードを書くことが多いので
「HTML から画像生成できたら便利だな〜」
と思いました。
そこで少し調べると、node-html-to-imageというライブラリが見つかり、これを使うと割と簡単にやりたいことが実現できそうでした。
使い方
以下のコードは README からの引用ですが、このように HTML を引数として渡してやると、その HTML の表示結果が画像として出力されます。
const nodeHtmlToImage = require("node-html-to-image");
nodeHtmlToImage({
output: "./image.png",
html: "<html><body>Hello world!</body></html>"
}).then(() => console.log("The image was created successfully!"));
上記の例だと、「Hello World!」と書かれたシンプルな画像ファイルが生成されます。
今回自分は画像を返す API を作りたかったので、README にある以下のコードを参考に作成しました。
const express = require("express");
const router = express.Router();
const nodeHtmlToImage = require("node-html-to-image");
router.get(`/api/tweet/render`, async function(req, res) {
const image = await nodeHtmlToImage({
html:
"<html><body><div>Check out what I just did! #cool</div></body></html>"
});
res.writeHead(200, { "Content-Type": "image/png" });
res.end(image, "binary");
});
非常にシンプルですがこれで最低限やりたいことは実現できたので、お手軽に画像生成したい場合はこれが良さそうです。
ちなみにですが、このライブラリの内部処理としては Puppeteer で HTML を描画してスクリーンショットを撮っているだけです。
言われてみれば確かにこれでいけるな...と README や内部の処理を読んでいて思いましたが、やっている事的にあんまり軽くはなさそうなので、もしこれより良さそうな方法で簡単に HTML から画像を生成する方法をご存知の方がいらっしゃればぜひコメント欄にて教えていただけますと嬉しいです 🙏