[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-vercel上部署node-canvas的中文字型顯示問題":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":17,"minRead":18},3372,"vercel上部署node-canvas的中文字型顯示問題","Vercel上部署node-canvas的中文字型顯示問題","Vercel上部署node-canvas的中文字型顯示問題 這應該是個冷門的狀況，因為使用了node版本的ca […]","\u003Ch1>Vercel上部署node-canvas的中文字型顯示問題\u003C\u002Fh1>\n\u003Cp>這應該是個冷門的狀況，因為使用了node版本的canvas去跑圖，但Vercel的serverless環境沒有中文字型，所以輸出中文字體會變成框框，如果在本機伺服器處理這件事很簡單，安裝中文字型就好了(真是廢話)，但如果是在Vercel上的話，就得想辦法了。\u003C\u002Fp>\n\u003Ch2>解決方式\u003C\u002Fh2>\n\u003Cp>其實要做的目標就是，要如何在Vercel的node中安裝中文字型？從Vercel的官方說明能找到關鍵資訊：\u003Cbr \u002F>\n\u003Ca href=\"https:\u002F\u002Fvercel.com\u002Fguides\u002Fhow-can-i-use-files-in-serverless-functions\" title=\"How can I use files in Serverless Functions on Vercel?\">How can I use files in Serverless Functions on Vercel?\u003C\u002Fa>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>\u002F\u002F api\u002Fhello.js\n\nimport { readFileSync } from 'fs';\nimport path from 'path';\n\nexport default function handler(req, res) {\n  const file = path.join(process.cwd(), 'files', 'test.json');\n  const stringified = readFileSync(file, 'utf8');\n\n  res.setHeader('Content-Type', 'application\u002Fjson');\n  return res.end(stringified);\n}\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>主要透過\u003Ccode>path\u003C\u002Fcode>來加入檔案，而我後來是用\u003Ccode>node-canvas\u003C\u002Fcode>的registerFont方法來實作這件事。\u003Cbr \u002F>\n大概寫法如下：\u003C\u002Fp>\n\u003Cpre>\u003Ccode>import canvas from 'canvas'\nimport path from 'path';\n\nconst canvasObj = canvas.createCanvas(256, 256);\nconst resolved = path.resolve('.\u002Ffonts\u002FFont.ttf');\ncanvasObj.registerFont(resolved, { family: 'Font' });\n...\n...\n...\nctx.font = '30px Font';\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>這邊要注意\u003Ccode>path.join\u003C\u002Fcode>有可能在某些狀況讀不到路徑，所以改用了\u003Ccode>path.resolve\u003C\u002Fcode>。\u003Cbr \u002F>\n另外也要注意Vercel部署時有50mb的限制，字型檔案太大有可能會編譯失敗唷。\u003C\u002Fp>\n","2023-02-19T11:32:08","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2023%2F01%2F640px-Node.js_logo.svg.png",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15],{"name":16,"slug":16},"node","\u002Fblog\u002Fvercel上部署node-canvas的中文字型顯示問題",1]