javascripthtmlnode.jswkhtmltoimage

rendered image is much wider than html element

I'm trying to render this page with npm's wkhtmltox into a png:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      html, body {
        padding: 0;
        width: 340px;
      }
      html, body, dl {
        margin: 0;
        font-size: 11px;
        font-family: Verdana, Arial;
        background-color: #fff;
      }
      dl {
        padding: 5px;
        width: 330px;
      }
      dt {
        float: left;
        clear: left;
        width: 80px;
        text-align: right;
        color: #1d439b;
      }
      dd {
        width: 240px;
        margin: 0 0 0 90px;
        padding-bottom: 0.5em;
      }
    </style>
  </head>
  <body>
    <dl>
      <dt>eargasm</dt><dd>Audio (music/effects/foley) is outstanding.</dd>
      <dt>中文</dt><dd>My favourite language (mandarin chinese).</dd>
      <dt>eyegasm</dt><dd>Mind-blowingly stunning visuals.</dd>
    </dl>
  </body>
</html>

I am just rendering this like normal:

converter.image(fs.createReadStream('tagslegend.html'), { format: "png" }).pipe(response);

I get an image back like this:

enter image description here

It's 1024 pixels wide.

I'm expecting a 340 pixel-wide image.

Solution

  • It defaults to the "screen width" (1024 pixels). You can set the width option like this...

    converter.image(fs.createReadStream('tagslegend.html'), { format: "png", width: "340" }).pipe(response);

    You can run wkhtmltoimage --help at the command line to get more options.

    The command line arguments map to option names, but instead of hyphens, camel case is used... e.g. the command line argument --foo-bar 123 becomes option fooBar: '123'