🌁

HTMLとしてレンダリング・レイアウトした画像をPNGとして保存する

2022/08/06に公開約1,500字

先日こんなツールを作成しました。

https://github.com/side-beach-city/SBC.ImageMaker

わたしが今まで配信しているポッドキャスト番組SBCast.では公開後に、その情報をInstagramにQRコード付きで紹介&YouTubeに音声+画像の動画をアップロードしていたのですが、それらをいちいちPC上のツールを使うことなくWeb上で作成できるツールです。

画像のレイアウトなどはCSSを使えば比較的簡単にできますので、それを画像として保存します。

結論

結論から言うとDOM to Imageというモジュールを使用します。

https://github.com/tsayen/dom-to-image

HTMLのレイアウトをして、保存したい要素を含むノードを引数にdomtoimage.toPng()などのメソッドを呼び出せばOKです。

document.querySelectorAll("button[data-role='saveimage']").forEach(v => v.addEventListener("click", async (e) => {
  const imgbase = document.getElementById("imgbase");
  const dl = document.createElement("a");
  dl.href = await domtoimage.toPng(imgbase, {
    width: imgbase.clientWidth,
    height: imgbase.clientHeight
  });
  dl.download="savefile.png";
  dl.click();
}));

なお、widthとheightを指定しない場合、とくにpositionがrelativeなどの値になっているノードを保存しようとしたときに画像サイズが期待通りの値にならないことがありますので、必ず設定しておきましょう。

html2canvasじゃダメなんですか?

同種のことを行うライブラリにhtml2canvasというモジュールがあります。

http://html2canvas.hertzen.com/

ただこちらは独自にCSSを解釈して処理を行っているため、ブラウザと対応しているCSSが若干異なります(なにをサポートしていないかは、公式ドキュメントのfeaturesのページに書いてあります)。

今回は使おうとしているCSSにモロに非対応のプロパティがあったので使用できませんでした。

参考文献

Discussion

ログインするとコメントできます