HTML 用中文unicode转png？

Question

我正在尝试使用 npm 包 wkhtmltox:

呈现此 html 文档 ./tagslegend.html

<!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>

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

我希望它的呈现方式与我的浏览器呈现的一样 html:

但我得到的是这样的 png：

如何解决此问题并使其像第一张图片一样呈现？

我在服务器上安装了该字体：

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

Answer 1

这看起来像是字符编码问题。似乎 fs.createReadStream() 正在将您的 HTML 读取为 ISO-8859-1，而实际上它应该将其读取为 UTF-8——这很奇怪，因为 UTF-8 是默认编码。

我会确保 tagslegend.html 正确保存为 UTF-8 文件。明确声明不会有什么坏处：

<meta charset="utf-8">

...在您的 HTML 的 <head> 部分。

HTML 用中文unicode转png？

HTML with chinese unicode to png?

javascript

fonts

non-ascii-characters

node.js

wkhtmltoimage