使用sharp.js图片模版生成图片中文乱码

介绍sharp.js

官网地址 https://sharp.nodejs.cn/

这种高速 Node-API 模块的典型用例是将常见格式的大图片转换为较小的、网络友好的不同尺寸的 JPEG、PNG、WebP、GIF 和 AVIF 图片。
它可与所有支持 Node-API v9 的 JavaScript 运行时一起使用，包括 Node.js >= 18.17.0、Deno 和 Bun。
由于使用了 libvips，调整图片大小通常比使用最快的 ImageMagick 和 GraphicsMagick 设置快 4 到 5 倍。
色彩空间、嵌入式 ICC 配置文件和 Alpha 透明度通道均已正确处理。Lanczos 重采样确保不会为了速度而牺牲质量。
除了图片大小调整之外，还可以进行旋转、提取、合成和伽玛校正等操作。
大多数现代 macOS、Windows 和 Linux 系统不需要任何额外的安装或运行时依赖。

安装

pnpm add sharp

需求

使用现有图片模板然后进行生成上面有用户信息文本 下面显示用户的分享数据二维码信息

模版如下

乱码问题

本地测试生成时候没有问题 然后部署到服务器时候就开始搞鬼了，上面渲染的中文文本就变成了乱码

寻找问题

因为本来是在windows上面开发的，所以也没有测试一个所以然 并不是代码的问题。 然后我就把代码放到了另一台那测试机上面，然后问题又复现了。此处可以肯定的是环境问题，然后就开始了linux上面安装中文字体包的过程....

1.创建字体目录并复制字体

sudo mkdir -p /usr/share/fonts/chinese
sudo cp /path/to/msyh.ttf /usr/share/fonts/chinese/

2.设置文件权限

sudo chmod 644 /usr/share/fonts/chinese/msyh.ttf

3.刷新字体缓存

sudo fc-cache -fv

4.验证字体是否安装成功

fc-list :lang=zh

如果输出中包含 /usr/share/fonts/chinese/msyh.ttf，说明字体安装成功。

在Sharp.js中使用中文字体

const sharp = require(sharp');

const svg = `
<svg width="400" height="100">
  <style>
    text {
      font-family: 'Microsoft YaHei', sans-serif;
      font-size: 32px;
    }
  </style>
  <text x="10" y="50">你好，世界！</text>
</svg>
`;

sharp(Buffer.from(svg))
  .png()
  .toFile('output.png')
  .then(() => console.log('成功生成带中文的图片'))
  .catch(console.error);

生成效果图