HTML with chinese unicode to png?

Question

I'm trying to render this html document ./tagslegend.html with npm package wkhtmltox :

<!doctype html>
<html>
  <head>
    <style>
      .cmn {
        font-family: 'WenQuanYi Micro Hei';
      }
    </style>
  </head>
  <body>
    <dl>
      <dt class="cmn">中文</dt><dd>In mandarin language.</dd>
    </dl>
  </body>
</html>

Here's the javascript:

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

I expect it to render like my browser would render that same html:

But am instead getting a png like this:

How can I fix this and make it render like the first image?

I have that font installed on the server:

$ fc-list | grep 'Wen'
/app/.fonts/WenQuanYi Micro Hei.ttf: WenQuanYi Micro Hei,文泉驛微米黑,文泉驿微米黑:style=Regular

Answer 1

This looks like an character encoding problem. It seems as if fs.createReadStream() is reading your HTML as ISO-8859-1, when it really should be reading it as UTF-8 — which is odd, since UTF-8 is the default encoding.

I'd make sure tagslegend.html is properly saved as a UTF-8 file. It couldn't hurt to explicitly declare:

<meta charset="utf-8">

...in the <head> section of your HTML as well.

HTML with chinese unicode to png?

Question

1 answers

solution1
0 ACCPTED 2018-02-25 19:51:54

HTML with chinese unicode to png?

Question

1 answers

solution1 0 ACCPTED 2018-02-25 19:51:54

solution1
0 ACCPTED 2018-02-25 19:51:54