How to create an image with HTML template in node.js

Question

I have a HTML template file in node js. And I want to convert that template with into image by replacing static values with dynamic values. Suppose I have a below HTML template saved in any variable in my CONFIG file:

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

I want to create above HTML image. Can anyone please suggest me library for this?

I am not sure if you are asking for this, but it could work: stackoverflow.com/questions/45207479/… — No One
– No One, Commented Jan 25, 2019 at 10:40
@NoOne, No i am not using ejs. I just have html saved in variable and i want to create image from that. — Rajat
– Rajat, Commented Jan 25, 2019 at 10:44
to use dynamic values in string literals you can use ${} and pass your value inside curly braces as `static value ${dynamic value}`. Refer developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — arizafar
– arizafar, Commented Jan 25, 2019 at 10:53
@Ariz, I know this. Just gave the sample above. Please let me know the library for that. — Rajat
– Rajat, Commented Jan 25, 2019 at 11:16

Daniel Doblado · Accepted Answer · 2019-01-25 11:54:07Z

5

You can render a HTML string to an image in node.js by using Puppeter

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

This will create example.png in your folder, it's also possible to clip the image or remove the background by adding properties https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagescreenshotoptions

edited Jan 25, 2019 at 11:54

answered Jan 25, 2019 at 11:38

Daniel Doblado

2,9381 gold badge18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

24 Comments

Rajat Over a year ago

Thanks for your answer. Can you please tell me, is this module works at node js side?

Daniel Doblado Over a year ago

Yes, you just need to do npm install -S puppeteer to make it work on node.js

Rajat Over a year ago

Can you please tell me one more thing?

Rajat Over a year ago

I will get form fields values from android app and have to create image by replacing static values in htmlTemplate with those form fields values and then return image to android app. So, Won't above code open a browser in android app while running that api?

Thomas Brok Over a year ago

For that you would need a fully functional server, e.g. with Express, which handles the incoming request with the form values and sends them to Puppeteer.

|

Collectives™ on Stack Overflow

How to create an image with HTML template in node.js

1 Answer 1

24 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

24 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related