😄

サーバーサイド側でcanvasを使用したとき日本語が文字化けして豆腐みたいになった

2024/09/13に公開

Next.js

Node.js

tech

サーバーサイド側でcanvasを使用したとき日本語が文字化けして豆腐みたいになった

サーバーサイド側でcanvasを使用したとき日本語が文字化けして豆腐みたいになったのでその不具合を直す

インストール

npm i @napi-rs/canvas

文字化け発生時のコード

import { createCanvas, GlobalFonts, loadImage } from "@napi-rs/canvas"

function main() {
  const width = 1200;
  const height = 630;

  const canvas = createCanvas(width, height);
  const ctx = canvas.getContext("2d");

  ctx.font = 'bold 64px';
  ctx.fillStyle = '#1F2937';
  ctx.textBaseline = 'top';
  ctx.textAlign = 'center';

  ctx.fillText("こんにちは世界", 500, 0)

  return canvas.toDataURL("image/png")
}

原因

実行環境によってはフォントが正常に表示されないことがある。ttfファイルをダウンロードしてそれを読み込むことで解決する

修正

Google fontで使用したいフォントのttfファイルをダウンロード
テキストを表示する前にフォントをダウンロード

import { createCanvas, GlobalFonts, loadImage } from "@napi-rs/canvas"

function main() {
  const width = 1200;
  const height = 630;

  const canvas = createCanvas(width, height);
  const ctx = canvas.getContext("2d");

  // registerFromPathはフォントファイルのパスを指定する
+ GlobalFonts.registerFromPath(join(cwd(), "public", "Shippori_Mincho", "ShipporiMincho-Bold.ttf"), "ShipporiMinchoBold")
  
+ ctx.font = 'bold 64px ShipporiMinchoBold';　// 読み込んだフォントファミリーを指定
- ctx.font = 'bold 64px';
  ctx.fillStyle = '#1F2937';
  ctx.textBaseline = 'top';
  ctx.textAlign = 'center';

  ctx.fillText("こんにちは世界", 500, 0)

  return canvas.toDataURL("image/png")
}