简单描述

如果在前端项目中使用了 Konva.js ，为了保持前后端输出一致， 就有必须在服务端也使用它。

在 Google 中搜索 Konva.js Node ，第一个链接就是 konva-node 这个包， 它提示我们已经被废弃了，可以直接在 Konva.js 中使用。

Konva.js 文档里有这么一节：

4 NodeJS env

In order to run konva in nodejs environment you also need to install canvas package manually. Konva will use it for 2d canvas API.

Then you can use the same Konva API and all Konva demos will work just fine. You just don't need to use container attribute in your stage.

好了，这就是它所有的文档

碰到的一些问题

canvas node

要安装 canvas 这个包，还需要安装一些依赖。 比如在 alpine-node 环境下，需要执行：

RUN apk add --no-cache libc6-compat make python3 g++ cairo-dev pango-dev
# add giflib-dev for *gif*
# add libjpeg-turbo-dev for *jpg*
# add freetype-dev for font

然后 npm install canvas 这个包，但是这个包会去 github 下载一个二进制文件，网络不好可能会卡主。 需要加个环境变量（安装过 Electron 的朋友应该很熟悉🤣）

RUN npm ci --canvas_binary_host_mirror=https://registry.npmmirror.com/-/binary/canvas

图片加载

Konva.js 官方的例子在服务端跑不起来（应该要看下 canvas 的文档），这里找到了网上的例子

const loadImageAsync = async (img, src) => {
  return new Promise((resolve, reject) => {
    img.onload = () => {
      resolve();
    };
    img.onerror = (event: any) => {
      reject(event);
    };
    img.src = src;
  });
};

let img = new Canvas.Image();
await loadImageAsync(img, url);

const konvaImg = new Konva.Image({ image: img });

还有一点要注意，图片生成好之后，需要清理下，否则你就会看到内存占用飙升。。。

img.onload = null;
img.onerror = null;
img = null;
// layer.destroyChildren();
// layer.destroy();
// stage.destroyChildren();
// stage.destroy();

字体加载

同上，网上找到的例子

const fontFile = (name) => path.resolve("./assets/fonts", name);
const fontPath = fontFile(fontName);

Canvas.registerFont(fontPath, {
  family: element.fontName,
});

# 使用的时候，字体名需要和上面注册的一致
const text = new Konva.Text({ familyName: element.fontName });

关于字体格式

在 github issue 里面搜到了 canvas 对字体的支持，结论是最好用 ttf 格式，其他格式会有问题。

生成图片

const canvas = stage.toCanvas();
# 得到 buffer
await fs.promises.writeFile("test.png", canvas.toBuffer());