Search code examples
javascriptnode.jsunicodecharacter-encodingwkhtmltoimage

Render unicode text with wkhtmltoimage

Trying to use wkhtmltox to turn an HTML file to an image:

./server.js

const express = require('express');
const fs = require('fs');
const wkhtmltox = require('wkhtmltox');

const app = express();
const converter = new wkhtmltox();

app.get('/tagslegend.png', (request, response) => {
  response.status(200).type('png');
  converter.image(fs.createReadStream('tagslegend.html'), { format: "png" }).pipe(response);
});

var listener = app.listen(process.env.PORT, function () {
  console.log('App listening on port ' + listener.address().port);
});

And ./tagslegend.html:

<!doctype html>
<html>
  <body>
    <dl>
      <dt>中文</dt><dd>In mandarin language.</dd>
    </dl>
  </body>
</html>

I'm expecting back an image of the above HTML, e.g. (how my browser would render it):

enter image description here

Instead I get back this:

enter image description here

How can I render that HTML to a png dynamically with the correct chinese characters and serve it to clients?

Solution

  • Add

    <meta charset="utf-8">

    to the <head> of the HTML document