web-dev-qa-db-ja.com

Node.jsでHTMLを画像に変換する方法

A Nodeサーバー上のHTMLテンプレートを画像に変換する必要があります。サーバーはHTMLを文字列として受信します。PhantomJSを（Webshotと呼ばれるライブラリを使用して）試しましたが、それはできません。 tフレックスボックスと最新のCSSでうまく機能します。Chrome headless-browserを使用しようとしましたが、HTMLを解析するためのAPIがなく、URLしかありません。

HTMLの一部を画像に変換する現在最良の方法は何ですか？

より具体的にするためにここで試みます。次のようなHTMLテンプレートからサムネイル画像を作成する必要があります。

<div style="color:red;width:300px;hegiht:300px;">hello world</div>

フードの下でPhantomJSを使用して、これだけを行う必要があるwebshotというライブラリをすでに試しましたが、フレックスボックスなどのサポートされていないCSSが原因で、生成されたサムネイルは実際のHTMLテンプレートを正しく表しません。 Node.jsサーバーで実行する必要があります。クライアントはHTMLを文字列として送信し、サーバーはサムネイルをJPGまたはPNG形式で返します。

ヘッドレスChrome=をURLモードではなくテンプレートモードで使用する方法はありますか？つまり、次のようなことをする代わりに

chrome.goTo('http://test.com')

私は次のようなものが必要です：

chrome.evaluate('<div>hello world</div>');

この投稿へのコメントで提案されている別のオプションは、テンプレートをサーバー上のファイルに保存してからローカルで提供し、次のようなことを行うことです。

chrome.goTo('http://localhost/saved_template');

しかし、このオプションは少し厄介に思えます。他にもっと簡単な解決策はありますか？

htmlnode.jsimagephantomjsimage-generation
8
kundasaba

フロントエンドで html2canvas を使用して簡単に行うことができます。バックエンドでは、htmlをファイルに書き込み、 file URI を使用してアクセスできます（つまり、file:///home/user/path/to/your/file.html）、chrome headless-browserおよび Nightmare （スクリーンショット機能）で正常に動作するはずです。別のオプションは、単純なHTTPサーバーをセットアップしてURLにアクセスすることです。

7
gnuns

" puppeteer "というライブラリを使用できます。サンプルコードスニペット：

 const browser = await puppeteer.launch()
 const page = await browser.newPage()
 await page.setViewport({
            width: 960,
            height: 760,
            deviceScaleFactor: 1,
          });            
 await page.setContent(imgHTML)
 await page.screenshot({path: example.png})
 await browser.close()

これにより、HMTLのスクリーンショットがルートディレクトリに保存されます。

7
rudresh solanki