最近私には、大量のテキスト画像を生成する必要があります。フロントエンド開発者として、最初に思いつくのは、canvas を使って描画し、base64 として画像を保存することです。
しかし、大量生産を行う場合、ブラウザの DOM を使用すると、保存時に相対的に面倒になるため、Node を使用して処理する必要があります。そして、Node で canvas 環境を呼び出すには、node-canvas モジュールの依存関係をインストールする必要があります。しかし、M2 Mac デバイスで node-canvas をインストールしようとするとエラーが発生し、次のように表示されます:
つまり、公式の node-canvas は実際には arm64 用の node-canvas ソースを提供していないため、別の解決策を探す必要があります。
node-canvas をインストールする場合、node-gyp も必須です。まず、node-gyp をインストールしておく必要があります(すでにインストール済みの場合はスキップできます)。そうしないと、後で依存関係をインストールする際に、長時間待たされたりエラーが発生したりします。
node-gyp のインストールと設定#
ターミナルウィンドウを開き、次のコマンドを入力します:
export CXXFLAGS="-stdlib=libc++"
このコマンドは、C++ 標準ライブラリを libc++ に設定します。これは、M1 Mac で node-gyp が動作するために必要です。
ターミナルウィンドウに次のコマンドを入力します:
npm install -g node-gyp
このコマンドは、node-gyp パッケージをグローバルにインストールします。インストールが完了するまで待ちます。
node-canvas のインストール#
まず、homebrew ツールをインストールする必要があります。次のコマンドを正確にコピーして、ターミナルに貼り付けて段階的に実行してください:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
arch -arm64 brew install pkg-config cairo pango libpng jpeg giflib librsvg
2 つ目が完了すると、いくつかのパスをエクスポートするように指示されます。以下のように表示されます。これらの操作を実行しないと、機能しません。
完了したら、再度npm install node-canvas
を入力します。問題がなければ、成功裏にインストールできるはずです。リポジトリの issue を見たところ、Linux 環境では node-canvas の使用がさらに面倒で、特に高バージョンの node と組み合わせると、指定されたバージョンを使用しないとインストールに失敗する可能性があります。