Node-HTML-to-Image を使い始める

Node-HTML-to-Image をインストールするには、NPM を使用することをお勧めします。スムーズにインストールするには、次のコマンドを使用してください。

npm install node-html-to-image

yarn add node-html-to-image

Node.js 内で HTML コードからイメージを生成

Node-HTML-to-Image ライブラリの大きな強みの 1 つは、そのシンプルさであり、あらゆる Node.js アプリケーションに簡単に統合できることです。ソフトウェア開発者は、わずか数行のコードで、独自の Node.js アプリケーション内で HTML コンテンツからイメージを生成できます。この使いやすさにより、あらゆるスキル レベルの開発者が利用できます。次の例では、ライブラリは単純な HTML 文字列を受け取り、それを PNG イメージに変換します。出力イメージ image.png は、ルート ディレクトリに保存されます。

const nodeHtmlToImage = require('node-html-to-image');

nodeHtmlToImage({
  output: './image.png',
  html: '
Hello, World!
'
})
  .then(() => console.log('Image created successfully!'));

複雑な HTML と CSS のサポート

オープンソースの Node-HTML-to-Image は、基本的な HTML 処理に限定されません。JavaScript だけでなく、広範な CSS スタイルを使用した複雑な HTML ドキュメントも処理できます。Flexbox や Grid などの最新の CSS 機能を使用する場合でも、カスタム フォントを埋め込む場合でも、ライブラリはコンテンツを JPEG、PNG、WebP などの画像ファイル形式に正確にレンダリングします。開発者が Flexbox のスタイルやカスタム カラーを含むより複雑な HTML レイアウトから画像を生成し、適切にデザインされた画像を作成する方法を示す例を次に示します。

const nodeHtmlToImage = require('node-html-to-image');

const htmlContent = `

  
    

      

        
Welcome to My Website
        
Building the web, one pixel at a time.
      
    
  
`;

nodeHtmlToImage({
  output: './welcome-image.png',
  html: htmlContent
})
  .then(() => console.log('Complex layout image created successfully!'));

カスタマイズ可能な出力画像形式

Node-HTML-to-Image ライブラリは、PNG、JPEG、WebP など、複数の出力画像形式をサポートしています。この柔軟性により、Web パフォーマンスや画像品質など、特定のユースケースに最適な形式を選択できます。次の例は、ユーザーが出力を JPEG 画像として指定する方法を示しています。これは、品質をあまり損なわずにファイル サイズを最小限に抑える必要があるシナリオで役立ちます。

nodeHtmlToImage({
  output: './output-image.jpg',
  html: '
JPEG Image Example
',
  type: 'jpeg'
})
  .then(() => console.log('JPEG image created successfully!'));

Node.js での高度な画像レンダリング サポート

Node-HTML-to-Image ライブラリは、レンダリング プロセスを広範囲にカスタマイズするための完全なサポートを提供しています。ソフトウェア開発者は、ビューポート サイズ、デバイスのスケール係数を定義し、レンダリング前にカスタム CSS と JavaScript を HTML に挿入することもできます。次の例は、カスタム ビューポート サイズ 800x600 ピクセルで画像がレンダリングされ、品質が 100 に設定されて最高の画像品質が確保される様子を示しています。

nodeHtmlToImage({
  output: './custom-image.png',
  html: '
Custom Viewport
',
  viewport: { width: 800, height: 600 },
  quality: 100
})
  .then(() => console.log('Image with custom viewport created successfully!'));