まず、Node.jsのhtml-to-image
というパッケージを使用してHTMLを画像に変換する方法を紹介します。以下の手順に従ってください。
- Node.jsプロジェクトを作成し、必要な依存関係をインストールします。以下のコマンドを使用します。
mkdir html-to-image-example
cd html-to-image-example
npm init -y
npm install html-to-image
-
変換したいHTMLファイルを用意します。例えば、
index.html
という名前のファイルを作成し、適切なHTMLコンテンツを記述します。 -
Node.jsスクリプトを作成し、
html-to-image
パッケージを使用してHTMLを画像に変換します。以下は、変換の基本的な例です。
const fs = require('fs');
const { toPng } = require('html-to-image');
const htmlFilePath = 'index.html';
const outputImagePath = 'output.png';
fs.readFile(htmlFilePath, 'utf-8', (err, html) => {
if (err) throw err;
toPng(html)
.then(dataUrl => {
const base64Data = dataUrl.replace(/^data:image\/png;base64,/, '');
fs.writeFile(outputImagePath, base64Data, 'base64', err => {
if (err) throw err;
console.log('HTMLを画像に変換しました。');
});
})
.catch(err => {
throw err;
});
});
上記のスクリプトでは、html-to-image
のtoPng
関数を使用してHTMLをPNG画像に変換し、指定した出力パスに保存しています。変換したいHTMLファイルのパスと出力先の画像パスを適宜変更してください。
以上が、Node.jsを使用してHTMLを画像に変換する基本的な方法です。html-to-image
パッケージにはさまざまなオプションやカスタマイズ機能がありますので、必要に応じて公式ドキュメントを参照してください。また、他のパッケージやライブラリも利用することで、より高度な操作や追加の機能を実現することができます。