サーバーサイド側でcanvasを使用するメモ

サーバーサイド側でcanvasを使用するメモ

インストール

node-canvasではなく@napi-rs/canvasというライブラリを使用する。node-canvasは追加ライブラリが必要で手間がかかるらしい

リポジトリの冒頭

High performance skia binding to Node.js. Zero system dependencies and pure npm packages without any postinstall scripts nor node-gyp.

またnode-canvasからの切り替えも簡単でライブラリインストール後、import文のnode-canvasを@napi-rs/canvasと書き換えるだけでOK

npm i @napi-rs/canvas

コード

canvas上にHello Worldというテキストを表示し、それをpngファイルに変換する。

Next.jsのサーバーサイド側やNode.jsで実行してください

createCanvas以外はJavaScriptで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("Hello World", 500, 0)

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

実行結果

表示部分だけの写真です

参考

最後に

間違っていることあればコメントに書いていただけると幸いです。
よろしくお願いいたします。