Question

我在节点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()
})()

我想创建以上HTML图像。有人可以建议我为此图书馆吗？

Answer 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中使用HTML模板创建图像

1 个答案: