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

Question

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

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

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()
})()

Run Code Online (Sandbox Code Playgroud)

我想创建上面的 HTML 图像。任何人都可以为此建议我的图书馆吗？

Answer 1

Dan*_*ado 5

您可以使用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()
})()

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	7 年前
查看次数：	4937 次
最近记录：	4 年，9 月前