Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
在解決問題之道上不斷前行
這應該是個冷門的狀況,因為使用了node版本的canvas去跑圖,但Vercel的serverless環境沒有中文字型,所以輸出中文字體會變成框框,如果在本機伺服器處理這件事很簡單,安裝中文字型就好了(真是廢話),但如果是在Vercel上的話,就得想辦法了。
其實要做的目標就是,要如何在Vercel的node中安裝中文字型?從Vercel的官方說明能找到關鍵資訊:
How can I use files in Serverless Functions on Vercel?
// api/hello.js
import { readFileSync } from 'fs';
import path from 'path';
export default function handler(req, res) {
const file = path.join(process.cwd(), 'files', 'test.json');
const stringified = readFileSync(file, 'utf8');
res.setHeader('Content-Type', 'application/json');
return res.end(stringified);
}
主要透過path
來加入檔案,而我後來是用node-canvas
的registerFont方法來實作這件事。
大概寫法如下:
import canvas from 'canvas'
import path from 'path';
const canvasObj = canvas.createCanvas(256, 256);
const resolved = path.resolve('./fonts/Font.ttf');
canvasObj.registerFont(resolved, { family: 'Font' });
...
...
...
ctx.font = '30px Font';
這邊要注意path.join
有可能在某些狀況讀不到路徑,所以改用了path.resolve
。
另外也要注意Vercel部署時有50mb的限制,字型檔案太大有可能會編譯失敗唷。