nextjs + sharp在 vercel 环境svg转png出现中文乱码

本文主要是介绍nextjs + sharp在 vercel 环境svg转png出现中文乱码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在之前一篇博客 Next.js和sharp实现占位图片生成工具，详细介绍了使用 Next.js + sharp + Vercel 来实现一个 占位图片生成工具，遇到一个奇怪的问题：在本地开发环境，英文、数字、中文字符自定义内容，都能正常渲染。但是发布到 Vercel 生产环境，自定义内容除了英文字符和数字外，中文字符 显示为 Unicode 码位(乱码)，如下图所示。

svg转png中文乱码

问题原因

经过排查，发现是 sharp 库在 vercel 生产环境下，对 svg 转 png 时，中文字符 会出现乱码。而在本地开发环境，sharp 库对 svg 转 png 时，中文字符 不会出现乱码。
在 vercel 平台查看 log 日志，发现了错误提示：Fontconfig error: No writable cache directories。
进一步定位，说明是 vercel 容器环境没有支持中文的字体，因此无法正常渲染中文字符。

解决方案

在 nextjs 项目根目录下，创建 fonts 文件夹，将中文字体文件 NotoSansSC-Regular.ttf 放入 fonts 文件夹中。我这里使用的是 NotoSansSC-Regular.ttf 字体，支持简体中文字符。下载地址：https://github.com/notofonts/noto-cjk
在 fonts 文件夹下，创建 fonts.conf 文件，内容如下：

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig><dir>/var/task/fonts/</dir><cachedir>/tmp/fonts-cache/</cachedir><config></config>
</fontconfig>

在 sharp 处理 svg 转 png 函数所在文件的头部加入如下代码：

resolve(process.cwd(), 'fonts', 'fonts.conf')
resolve(process.cwd(), 'fonts', 'NotoSansSC-Regular.ttf')

在项目根目录下创建一个 .env 环境变量文件，内容如下：

FONTCONFIG_PATH=/var/task/fonts

在 svg 中设置 font-family，如下：

function getSvgBuffer({ w, h, bg, color, size, text }) {let textY = (+h + size / 2) / 2let svg = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"width="${w}" height="${h}"><rect width="${w}" height="${h}"fill="${bg}" style="fill:${bg};"/><text x="50%" y="${textY}" style="font-family: 'Noto Sans', 'Noto Sans SC', sans-serif;"dominant-baseline="alphabetic" text-anchor="middle" stroke="none" stroke-width="0" font-size="${size}" fill="${color}" fill-opacity="1">${text}</text>
</svg>`svg = '<?xml version="1.0" encoding="UTF-8"?>' + svgreturn Buffer.from(svg, 'utf-8')
}