如何在 node.js 中使用 HTML 模板创建图像答案

【问题标题】：How to create an image with HTML template in node.js如何在 node.js 中使用 HTML 模板创建图像
【发布时间】：2019-06-19 04:26:56
【问题描述】：

我在节点 js 中有一个 HTML 模板文件。我想通过用动态值替换静态值来将该模板转换为图像。假设我在 CONFIG 文件的任何变量中保存了以下 HTML 模板：

const puppeteer = require('puppeteer')
const htmlString = `<html>
                    <head>
                      <title></title>
                    </head>
                    <body>
                      <div class="container" style="height:500px;width:450px;border:1px solid silver;margin:0 auto">
                        <header style="height:200px;background-image: url('https://i.imgur.com/a1ItuWs.jpg');">
                            <center>
                              <span style="font-size:55px;color:white;font-weight: bold;font-family: arial;margin-top:20px">Hello</span>
                              <br>
                              <span style="font-size: 35px;color: white">rajat</span>
                              <br><br>
                              <span style="font-size:20px;color: white;font-family: arial;">from biondi Goh</span>
                            </center>
                        </header>
                        <section style="height: 280px;background: #ecfaff">
                          <center>
                            <span style="font-size: 30px;font-family: arial;">rajat subject</span>
                            <br><br>
                            <span style="font-size: 20px;font-family: arial;">rajat paragraph 1</span>
                            <br><br>
                            <span style="font-size: 20px;font-family: arial;color:red;">RAJAT INTEREST</span>
                            <br><br>
                            <span style="font-size: 20px;font-family: arial;">rajat Paragraph 2</span>
                          </center>
                        </section>
                        <footer style="height:20px;background: #ecfaff;text-align: center;font-family: arial;">
                            <span>http://biondi.assured.sg</span>
                        </footer>
                      </div>
                    </body>
                    </html>`;

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.setContent(htmlString)
  await page.screenshot({path: 'example.png',type: "jpeg", quality: 100})
  await browser.close()
})()

我想创建上面的 HTML 图像。谁能为此推荐我图书馆？

【问题讨论】：

我不确定您是否要求这样做，但它可以工作：stackoverflow.com/questions/45207479/…
@NoOne，不，我没有使用 ejs。我只是将 html 保存在变量中，我想从中创建图像。
要在字符串文字中使用动态值，您可以使用 ${} 并在花括号内将值作为“静态值 ${动态值}”传递。参考developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@Ariz，我知道这一点。刚刚给出了上面的示例。请让我知道图书馆。

标签： node.js

【解决方案1】：

您可以使用Puppeter 将 HTML 字符串渲染到 node.js 中的图像

npm install -S puppeteer

const puppeteer = require('puppeteer')

const htmlString = `<html>
<head>
    <title></title>
</head>
<body>
    <div class="container" style="height:200px;width: 200px;border: 1px solid red">
        <header style="height:50px">
            Header
        </header>
        <footer style="height:100px">
            footer
        </footer>
    </div>
</body>
</html>`;

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.setContent(htmlString)
  await page.screenshot({path: 'example.png'})
  await browser.close()
})()

这将在您的文件夹中创建example.png，也可以通过添加属性https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagescreenshotoptions来剪切图像或删除背景

【讨论】：

感谢您的回答。你能告诉我，这个模块在 node js 端工作吗？
是的，你只需要 npm install -S puppeteer 让它在 node.js 上工作
你能再告诉我一件事吗？
我将从 android 应用程序获取表单字段值，并且必须通过将 htmlTemplate 中的静态值替换为这些表单字段值来创建图像，然后将图像返回到 android 应用程序。那么，上面的代码不会在运行该 api 时在 android 应用中打开浏览器吗？
为此，您需要一个功能齐全的服务器，例如使用Express，它处理带有表单值的传入请求并将它们发送给Puppeteer。