解决 M1 安装 canvas 报错

前言

前端项目使用了 canvas 库，在 M1 上安装会报错

The chromium binary is not available for arm64:
If you are on Ubuntu, you can install with:

 apt-get install chromium-browser

path-to-project/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserFetcher.js:112
            throw new Error();

安装 chromium

brew install chromium

安装 node-canvas 依赖

brew install pkg-config cairo pango libpng jpeg giflib librsvg

安装依赖时 git 报错

fatal: not in a git directory
Error: Command failed with exit 128: git

设置 git 来源

git config --global --add safe.directory /opt/homebrew/Library/Taps/homebrew/homebrew-core
git config --global --add safe.directory /opt/homebrew/Library/Taps/homebrew/homebrew-cask

查看是否设置成功

brew -v

再次执行安装

安装依赖时报错找不到 tar 压缩包

打开 formulae.brew.sh/formula/ 搜索对应包名

再执行 brew install ${package-name}
会报错需要 clean，不需要理会，再此执行 brew install pkg-config cairo pango libpng jpeg giflib librsvg

重复上述操作，直到把所有依赖安装完成

自己编译 canvas

npm install --build-from-source canvas

返回项目 npm i 安装依赖就不会有 node-canvas 的报错了

参考链接

fatal: not in a git directory Error: Command failed with exit 128: git
How to fix M1 Mac Puppeteer chromium arm64 bug