DEV Community

Generate images from HTML in Node.js

🦁 Yvonnick FRIN on December 18, 2019

As developers, we don't have great skills with image manipulation softwares, but we still need it. In my case I had to generate Twitter cards for s...

Read full post

Desiré 👩‍🎓👩‍🏫 • Dec 18 '19

¡Amazing!

Just tried it out, loving it! Just one question. If I use px to set the width of my elements, the image looks good:

But if I use % to set the width, then:

Why could this happen?

However, amazing project, thank you!

🦁 Yvonnick FRIN • Dec 18 '19

Thank you Desiré!

Basically the module takes a screenshot of the body tag's content. So you need to fix the size of you image on this tag using CSS then you can use percent on body's children.

Maybe I should add this in the documentation?

Desiré 👩‍🎓👩‍🏫 • Dec 18 '19 • Edited

Not sure, my code is as follows:

<body>
    <div class="card">
       [ ... ] (lots of subdivs)
    </div>
</body>

and my css:

        .card{
            width: 20%; /** if it's % then the image's width doesn't display properly **/
            box-shadow: 1px 3px 15px lightgray;
            height: 250px;
        }

I guess if it's a % then it won't work properly and you must set a fixed width for your elements before taking the screenshot!

I think it would be useful to add this as a sidenote, in case someone is setting all the components with %!

Also, it works perfectly fine with rem and em too.

EDIT: I'm using the CLI version just in case that matters!

🦁 Yvonnick FRIN • Dec 18 '19 • Edited

Percentage are relative to your parent dimensions So it will be 20 percent of body. If you don't fix body size it will be relative to the browser's viewport I guess. I don't set any viewport. So I recommend fixing body size to the resolution you want for the output file.

In the example below I fix the size to A4 format in high resolution. The output file resolution will be 2480x3508. So the card size will be 20% of 2480px. You see what I mean?

<html>
  <head>
    <style>
       body {
         width: 2480px;
         height: 3508px;
       }
       .card{
         width: 20%; /** if it's % then the image's width doesn't display properly **/
         box-shadow: 1px 3px 15px lightgray;
         height: 250px;
        }
    </style>
  </head>
  <body>
    <div class="card">
       [ ... ] (lots of subdivs)
    </div>
  </body>
</html>

Desiré 👩‍🎓👩‍🏫 • Dec 18 '19

Sure! I usually never set any size for the body, it should be nice to have it in mind so the image looks good, thank you!

🦁 Yvonnick FRIN • Dec 18 '19

Désiré I added a section about this in the documentation. What do you think of it?

Desiré 👩‍🎓👩‍🏫 • Dec 18 '19

Clear as a sunny day, I think there can't be any risk now! Thank you!

Nathaniel-kw Cheung • Apr 17 '20

Super cool stuff

Is there any way to use custom font? I got a HTML like this but the output image is not using the font specified (it's good to show in browser)

<br>
body {<br>
width: 1000px;<br>
height: 500px;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> @font-face {
font-family: JuneBug;
src: url('JUNEBUG.TTF');
}

h1 {
    font-family: JuneBug
}

</style>
</code></pre></div>
<p></head></p>

<p><body>Hello world!<br>
<h1>Hey, June</h1><br>
</body></p>

🦁 Yvonnick FRIN • Apr 20 '20

Hi Nathaniel,

TTF format is made for Safari, Android and iOS. The image is generated in a chromium browser. So you can only use WOFF format.

Wei Lun • Feb 26 '20 • Edited

This won't work on Docker, need to install anything other that npm install?

Sebastián Rojas Ricaurte • Apr 18 '20

You have to follow this for Docker github.com/puppeteer/puppeteer/blo... (tehere is specifict instructiosn for alpine also) and send this in puppeteerArgs when you call nodeHtmlToImage:

puppeteerArgs: {
headless: true,
args: [
"--no-sandbox",
"--remote-debugging-address=0.0.0.0",
"--remote-debugging-port=9222",
],
}