在 Mac 中编译安装 node-canvas本文讲解在项目中需要使用 node-canvas 时,如何以从源代码构建的

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

概述

环境:
MacOSX 10.13.5
Node.js v14.16.0
pnpm 6.14.7

问题描述: 需要在项目中使用 canvas,而新版本的 canvas 是在 MacOS 10.15 上预构建的,跟 10.13 不兼容which was built for Mac OS X 10.15

如果要使用的话,需要在安装的时候选择从源代码构建,重新编译才行.

首先按照 node-canvas 中的描述,需要先安装一些依赖

brew install pkg-config cairo pango libpng jpeg giflib librsvg

这些依赖中的librsvg安装起来特别麻烦,可以先试试看,如果能正常安装最好,如果安装不了,可以看看是不是跟我遇到的问题一样,如果是的话,可以尝试下我的这个解决方案.

另外如果明确不用支持 svg 的话,其实可以跳过安装 librsvg.

安装 librsvg

我遇到的情况是安装librsvg时,需要依赖rust,而 brew 安装rust总是失败,提示

Last 15 lines from /Users/Home/Library/Logs/Homebrew/rust/02.make:
      ~~^
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include/c++/v1/cmath:325:9: error: no member named 'isunordered' in the global namespace
using ::isunordered;
      ~~^
13 errors generated.

我尝试按照 Rust 官方文档的介绍,使用 Rustup 来安装 Rust 却能正常安装 Rust,但 brew 中却不认我自己安装的 Rust 每次安装 librsvg 时,非要自己在去安装,结果又安装失败.进过一番搜索,通过修改 librsvg 的安装脚本,最终成功安装上了 librsvg.具体步骤如下

1. 安装 Rust

找到 rust 官方文档,按照文档使用 Rustup 的方式来安装 Rust.

2. 编辑 librsvg 安装脚本

目的: 在安装的时候使用上一步安装的 Rust

brew 好像只认自己安装的 Rust,不管系统中原先是否已经有 Rsut,在安装 librsvg 时依旧会去安装 Rust.另外 brew 的安装脚本好像也不认 .bashrc 中的设置.使用 Rustup 默认是将 rustc 和 cargo 安装到~/.cargo/bin下的,在 .bashrc 中添加了. "$HOME/.cargo/env",可以正常在终端中使用rustc和cargo,但在安装 librsvg 的时候会找不到rustc和cargo,怀疑是安装脚本中没有使用 .bashrc 中的设置,不过我对 Ruby 不熟,所以也就没有去深究了,直接在脚本中将需要的环境变量添加进去.

运行brew edit librsvg可以打开安装脚本,在第 24 行的def install下添加下面的代码,将其中的xxx替换成自己对应的用户名.如果不是用 Rustup 的默认安装,而是自定义了 Rust 的安装路径,就改成自己对应自定义的路径,要用绝对路径.

ENV["PATH"] = "/User/xxx/.cargo/bin:#{ENV["PATH"]}"
ENV["CARGO"] = "/User/xxx/.cargo/bin/cargo"
ENV["RUSTUP_TOOLCHAIN"] = "stable"

并且注释掉对 rust 和 cairo 的依赖

# depends_on "rust" => :build
# depends_on "cairo"

RUSTUP_TOOLCHAIN 如果不加这个环境变量的话,会报错,提示error: no override and no default toolchain set

3. 安装 librsvg 的前置依赖

这一步可以省略,在安装 librsvg 时,如果缺少了某些依赖,会自动安装.不过这样分开安装,比较有利于分析问题.

Installing dependencies for building

brew install automake gtk-doc pkgconfig libtool gobject-introspection gdk-pixbuf pango

4. 安装 librsvg

然后运行安装命令,等待安装结束

brew install librsvg

时间会比较长,我这机子用了 6 分钟左右.因为性能的原因,时长会有差异,但如果超过太多,可能就不太正常了,可以通过~/Library/Logs/Homebrew/librsvg/中的文件,查看具体的日志了解详情

这样做看起来比较丑,不过因为我对 brew 和 Ruby 都不是很熟,所以只能这样,好在最后能解决问题.如果有人知道更优雅的做法的话,希望能留言告诉我.

安装 canvas

终于可以开始安装 canvas 了,正常安装的话,默认情况会直接下载二进制文件,而我们需要在安装的时候从源代码去构建,需要在安装是添加一些选项,根据对应的的包管理工具,使用对应的命令

npm: npm install canvas --build-from-source
yarn: npm_config_build_from_source=true yarn add canvas
pnpm: npm_config_build_from_source=true pnpm add canvas

测试

安装完成后,可以用官方的示例验证下,随便找一张图片,替换到例子中的examples/images/lime-cat.jpg,然后运行,看看是否能正常将输出,如果能正常输出,恭喜,已经成功编译并安装好 canvas 了🎉.

在 Mac 中编译安装 node-canvas

概述