leafer-ui
Web 版 ｜ Worker 版 ｜ Node 版 ｜ 小程序版
如果您仅需绘图功能，推荐更轻量的 leafer-draw。
安装
在服务端环境中运行，可用于后台绘图、生成图片、自动化测试，能够 模拟用户交互。
sh
npm install @leafer-ui/nodesh
pnpm add @leafer-ui/nodesh
yarn add @leafer-ui/nodesh
bun add @leafer-ui/nodeskia ｜ napi
@napi-rs/canvas 用于在服务端环境中替代 Canvas 的功能， 底层也是基于 skia，不同的是使用 Rust 语言封装，高性能、零系统依赖，需单独安装。
TIP
NAPI-RS 是一个在 Rust 下编写高性能 Node.js 扩展的框架。
sh
npm install @napi-rs/canvassh
pnpm add @napi-rs/canvassh
yarn add @napi-rs/canvassh
bun add @napi-rs/canvas体验
创建入口文件，实现一个包含矩形的画布，并生成图片显示。
js
const { Leafer, Rect, useCanvas } = require('@leafer-ui/node')
const napi = require('@napi-rs/canvas')
const http = require('http')
useCanvas('napi', napi) // must
http.createServer(function (req, res) {
const leafer = new Leafer({ width: 800, height: 600 })
leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100))
leafer.export('png').then(function (result) {
res.writeHead(200, { 'Content-Type': 'text/html' })
res.write(`<img src="${result.data}" />`)
res.end()
})
}).listen(3000, function () {
console.log('\x1B[36m%s\x1B[0m', 'server is running at http://localhost:3000')
})js
import { Leafer, Rect, useCanvas } from '@leafer-ui/node'
import napi from '@napi-rs/canvas'
import http from 'http'
useCanvas('napi', napi) // must
http.createServer(function (req, res) {
const leafer = new Leafer({ width: 800, height: 600 })
leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100))
leafer.export('png').then(function (result) {
res.writeHead(200, { 'Content-Type': 'text/html' })
res.write(`<img src="${result.data}" />`)
res.end()
})
}).listen(3000, function () {
console.log('\x1B[36m%s\x1B[0m', 'server is running at http://localhost:3000')
})运行以下命令，然后在浏览器访问 localhost:3000
sh
node index.jssh
node index.mjs使用自定义字体
通过 @napi-rs/canvas 的 GlobalFonts.registerFromPath() 方法加载字体后，再设置 fontFamily 即可。
https://www.npmjs.com/package/@napi-rs/canvas#emoji-text