懂AI
canvas

canvas

高性能Node.js Canvas库 无系统依赖

@napi-rs/canvas是一个基于Google Skia和Node-API的Canvas库。该库无系统依赖，支持PNG、JPEG等多种图像格式，提供Path2D、PathKit、路径操作、渐变填充等功能。性能方面比同类库快30%以上，适用于需要高性能图形处理的Node.js应用。

skr canvasNode.jsGoogle Skia性能Path2DGithub开源项目
访问官网GitHub

skr canvas

CI Skia 版本 安装大小 下载量

🚀 通过在 Github 上赞助我来帮助我成为一名全职开源开发者

通过 Node-API 将 Google Skia 绑定到 Node.js，无系统依赖！

⚠️ 本项目处于预发布阶段。可能存在一些 bug。<br/> 有关计划功能和未来方向的详细信息，请参阅 路线图。

英文文档

安装

yarn add @napi-rs/canvas
npm install @napi-rs/canvas

支持矩阵

系统要求

arm64

Linux 上的 cortex-a57 或更新的 CPU 架构。

macOS 上的所有 Apple M 芯片。

armv7

cortex-a7 或更新的 CPU 架构。

glibc

由于 Skia 依赖 glibc 2.18 API，您的系统需要至少具有 glibc 版本 >= 2.18。

AWS Lambda 使用

要在 Lambda 上使用此库，您需要使用 Lambda 层。

您可以通过从 Canvas-Lambda-Layer 获取 ARN 来简单地附加 lambda 层。

打包 Lambda 时，请确保排除 @napi-rs/canvas。

使用方法

const { promises } = require('node:fs')
const { join } = require('node:path')
const { createCanvas, loadImage } = require('@napi-rs/canvas')

const canvas = createCanvas(300, 320)
const ctx = canvas.getContext('2d')

ctx.lineWidth = 10
ctx.strokeStyle = '#03a9f4'
ctx.fillStyle = '#03a9f4'

// 墙
ctx.strokeRect(75, 140, 150, 110)

// 门
ctx.fillRect(130, 190, 40, 60)

// 屋顶
ctx.beginPath()
ctx.moveTo(50, 140)
ctx.lineTo(150, 60)
ctx.lineTo(250, 140)
ctx.closePath()
ctx.stroke()

async function main() {
  // 从磁盘或 URL 加载图片
  const catImage = await loadImage('path/to/cat.png')
  const dogImage = await loadImage('https://example.com/path/to/dog.jpg')

  ctx.drawImage(catImage, 0, 0, catImage.width, catImage.height)

  ctx.drawImage(dogImage, canvas.width / 2, canvas.height / 2, dogImage.width, dogImage.height)

  // 将画布导出为图像
  const pngData = await canvas.encode('png') // 也支持 JPEG、AVIF 和 WebP
  // 在 libuv 线程池中编码，非阻塞
  await promises.writeFile(join(__dirname, 'simple.png'), pngData)
}

main()

表情符号文本

const { writeFileSync } = require('fs')
const { join } = require('path')

const { createCanvas, GlobalFonts } = require('@napi-rs/canvas')

GlobalFonts.registerFromPath(join(__dirname, '..', 'fonts', 'AppleColorEmoji@2x.ttf'), 'Apple Emoji')
GlobalFonts.registerFromPath(join(__dirname, '..', '__test__', 'fonts', 'COLRv1.ttf'), 'COLRv1')

console.info(GlobalFonts.families)

const canvas = createCanvas(760, 360)
const ctx = canvas.getContext('2d')

ctx.font = '50px Apple Emoji'
ctx.strokeText('😀😃😄😁😆😅😂🤣☺️😊😊😇', 50, 150)

ctx.font = '100px COLRv1'
ctx.fillText('abc', 50, 300)

const b = canvas.toBuffer('image/png')

writeFileSync(join(__dirname, 'draw-emoji.png'), b)

性能

有关基准测试代码，请参见 benchmark。

硬件信息：

操作系统：Windows 10 x86_64
主机：Micro-Star International Co., Ltd. MS-7C35
内核：10.0.19043
终端：Windows Terminal
CPU：AMD Ryzen 9 5950X (32) @ 3.400GHz
内存：32688MiB

❯ yarn bench

> @napi-rs/canvas@0.0.9 bench D:\workspace\skia-rs
> node -r @swc-node/register benchmark/bench.ts

运行 "绘制房屋" 套件...
进度：100%

  skia-canvas:
    26 ops/s, ±0.70%   | 最慢，慢 29.73%

  node-canvas:
    30 ops/s, ±6.95%   | 慢 18.92%

  @napi-rs/canvas:
    37 ops/s, ±6.30%   | 最快

完成 3 个案例！
  最快：@napi-rs/canvas
  最慢：skia-canvas
运行 "绘制渐变" 套件...
进度：100%

  skia-canvas:
    36 ops/s, ±6.12%   | 慢 14.29%

  node-canvas:
    34 ops/s, ±5.60%   | 最慢，慢 19.05%

  @napi-rs/canvas:
    42 ops/s, ±0.53%   | 最快

完成 3 个案例！
  最快：@napi-rs/canvas
  最慢：node-canvas

特性

Path2D

new Path2D()
new Path2D(path: Path2D)
// new Path2D('M108.956,403.826c0,0,0.178,3.344-1.276,3.311  c-1.455-0.033-30.507-84.917-66.752-80.957C40.928,326.18,72.326,313.197,108.956,403.826z')
new Path2D(path: string)
export interface DOMMatrix2DInit {
  a: number
  b: number
  c: number
  d: number
  e: number
  f: number
}

export class Path2D {
  constructor(path?: Path2D | string)

  addPath(path: Path2D, transform?: DOMMatrix2DInit): void
  arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
  bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void
  closePath(): void
  ellipse(
    x: number,
    y: number,
    radiusX: number,
    radiusY: number,
    rotation: number,
    startAngle: number,
    endAngle: number,
    anticlockwise?: boolean,
  ): void
  lineTo(x: number, y: number): void
  moveTo(x: number, y: number): void
  quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
  rect(x: number, y: number, w: number, h: number): void
```javascript
// PathKit 方法
op(path: Path2D, operation: PathOp): Path2D
toSVGString(): string
getFillType(): FillType
getFillTypeString(): string
setFillType(type: FillType): void
simplify(): Path2D
asWinding(): Path2D
stroke(stroke?: StrokeOptions): Path2D
transform(transform: DOMMatrix2DInit): Path2D
getBounds(): [left: number, top: number, right: number, bottom: number]
computeTightBounds(): [left: number, top: number, right: number, bottom: number]
trim(start: number, end: number, isComplement?: boolean): Path2D
equals(path: Path2D): boolean
}

PathKit

PathKit 是 Skia 中用于操作路径的工具集，支持二次贝塞尔曲线、三次贝塞尔曲线和圆锥曲线。 主要功能如下：

路径操作

.op(path, PathOp)

const pathOne = new Path2D(
  'M8 50H92C96.4183 50 100 53.5817 100 58V142C100 146.418 96.4183 150 92 150H8C3.58172 150 0 146.418 0 142V58C0 53.5817 3.58172 50 8 50Z',
)
const pathTwo = new Path2D(
  '"M58 0H142C146.418 0 150 3.58172 150 8V92C150 96.4183 146.418 100 142 100H58C53.5817 100 50 96.4183 50 92V8C50 3.58172 53.5817 0 58 0Z',
)

pathOne.op(pathTwo, PathOp.Intersect).toSVGString()
// => "M100 100L58 100C53.5817 100 50 96.4183 50 92L50 50L92 50C96.4183 50 100 53.5817 100 58L100 100Z"
  • Union，从第一个路径中减去操作路径
  • Difference，对两个路径进行相交
  • ReverseDifference，对两个路径进行并集（包含或）
  • Intersect，对两个路径进行异或
  • XOR，从操作路径中减去第一个路径

布尔运算

转换路径中的 FillType

.asWinding()

你可以将 SVG 中的 fill-rule="evenodd" 转换为 fill-rule="nonzero"。 这对于 OpenType 字体相关工具很有用，因为 OpenType 字体只支持 fill-rule="nonzero"。

SVG fill-rule

const pathCircle = new Path2D(
  'M24.2979 13.6364H129.394V40.9091H24.2979L14.6278 27.2727L24.2979 13.6364ZM21.9592 0C19.0246 0 16.2716 1.42436 14.571 3.82251L1.67756 22.0043C-0.559186 25.1585 -0.559186 29.387 1.67756 32.5411L14.571 50.7227C16.2716 53.1209 19.0246 54.5455 21.9592 54.5455H70.4673V68.1818H16.073C11.0661 68.1818 7.00728 72.2518 7.00728 77.2727V113.636C7.00728 118.657 11.0661 122.727 16.073 122.727H70.4673V150H84.0658V122.727H128.041C130.975 122.727 133.729 121.303 135.429 118.905L148.323 100.723C150.559 97.5686 150.559 93.3405 148.323 90.1864L135.429 72.0045C133.729 69.6064 130.975 68.1818 128.041 68.1818H84.0658V54.5455H133.927C138.934 54.5455 142.993 50.4755 142.993 45.4545V9.09091C142.993 4.07014 138.934 0 133.927 0H21.9592ZM125.702 109.091H20.6058V81.8182H125.702L135.372 95.4545L125.702 109.091Z',
)
pathCircle.setFillType(FillType.EvenOdd)
pathCircle.asWinding().toSVGString()
// => "M24.2979 13.6364L129.394 13.6364L129.394 40.9091L24.2979 40.9091L14.6278 27.2727L24.2979 13.6364ZM21.9592 0C19.0246 0 16.2716 1.42436 14.571 3.82251L1.67756 22.0043C-0.559186 25.1585 -0.559186 29.387 1.67756 32.5411L14.571 50.7227C16.2716 53.1209 19.0246 54.5455 21.9592 54.5455L70.4673 54.5455L70.4673 68.1818L16.073 68.1818C11.0661 68.1818 7.00728 72.2518 7.00728 77.2727L7.00728 113.636C7.00728 118.657 11.0661 122.727 16.073 122.727L70.4673 122.727L70.4673 150L84.0658 150L84.0658 122.727L128.041 122.727C130.975 122.727 133.729 121.303 135.429 118.905L148.323 100.723C150.559 97.5686 150.559 93.3405 148.323 90.1864L135.429 72.0045C133.729 69.6064 130.975 68.1818 128.041 68.1818L84.0658 68.1818L84.0658 54.5455L133.927 54.5455C138.934 54.5455 142.993 50.4755 142.993 45.4545L142.993 9.09091C142.993 4.07014 138.934 0 133.927 0L21.9592 0ZM125.702 109.091L20.6058 109.091L20.6058 81.8182L125.702 81.8182L135.372 95.4545L125.702 109.091Z"

简化路径

.simplify()

将路径设置为与原始路径区域相同的非重叠轮廓，这意味着它还可以移除重叠的路径。

<img width="800" src="https://yellow-cdn.veclightyear.com/835a84d5/65b2d606-82ac-488b-a490-8c8920c20b51.png" >

带有重叠路径的 SVG (左)

const path =
  'M2.933,89.89 L89.005,3.818 Q90.412,2.411 92.249,1.65 Q94.087,0.889 96.076,0.889 Q98.065,0.889 99.903,1.65 Q101.741,2.411 103.147,3.818 L189.22,89.89 Q190.626,91.296 191.387,93.134 Q192.148,94.972 192.148,96.961 Q192.148,98.95 191.387,100.788 Q190.626,102.625 189.219,104.032 Q187.813,105.439 185.975,106.2 Q184.138,106.961 182.148,106.961 Q180.159,106.961 178.322,106.2 Q176.484,105.439 175.077,104.032 L89.005,17.96 L96.076,10.889 L103.147,17.96 L17.075,104.032 Q15.668,105.439 13.831,106.2 Q11.993,106.961 10.004,106.961 Q8.015,106.961 6.177,106.2 Q4.339,105.439 2.933,104.032 Q1.526,102.625 0.765,100.788 Q0.004,98.95 0.004,96.961 Q0.004,94.972 0.765,93.134 Q1.526,91.296 2.933,89.89 Z'

path.simplify().toSVGString()
// => "M89.005 3.818L2.933 89.89Q1.526 91.296 0.765 93.134Q0.004 94.972 0.004 96.961Q0.004 98.95 0.765 100.788Q1.526 102.625 2.933 104.032Q4.339 105.439 6.177 106.2Q8.015 106.961 10.004 106.961Q11.993 106.961 13.831 106.2Q15.668 105.439 17.075 104.032L96.076 25.031L175.077 104.032Q176.484 105.439 178.322 106.2Q180.159 106.961 182.148 106.961Q184.138 106.961 185.975 106.2Q187.813 105.439 189.219 104.032Q190.626 102.625 191.387 100.788Q192.148 98.95 192.148 96.961Q192.148 94.972 191.387 93.134Q190.626 91.296 189.22 89.89L103.147 3.818Q101.741 2.411 99.903 1.65Q98.065 0.889 96.076 0.889Q94.087 0.889 92.249 1.65Q90.412 2.411 89.005 3.818Z"

示例

tiger.json 是从 gojs/samples/tiger 序列化而来的

<img width="500" src="https://yellow-cdn.veclightyear.com/835a84d5/5e6c2de0-58d7-4a3c-a89d-9207b9e14bdf.png"> 
node example/anime-girl.js
SVGPNG
<img width="500" src="https://yellow-cdn.veclightyear.com/835a84d5/19501637-4934-48cc-be01-5f23861a128a.svg"><br/>CC-BY-SA 3.0 由 Niabot 创作<img width="500" src="https://yellow-cdn.veclightyear.com/835a84d5/9f64180d-3690-4636-aa8d-15e2f2163cd8.png"><br/>CC-BY-SA 3.0 由 Niabot 创作

构建

从源代码构建 skia

你可以从源代码构建这个项目，系统要求请参见：https://skia.org/docs/user/build

# 克隆代码：
$ git clone --recurse-submodules https://github.com/Brooooooklyn/canvas.git
$ cd canvas

# 构建 Skia：
$ node scripts/build-skia.js

# 安装 NPM 包，构建 Node.js 插件：
$ npm install -g yarn
$ yarn install --mode=skip-build # 这里有一些用于基准测试的模块安装较为困难，可以通过指定 `--mode=skip-build` 来跳过
$ sudo dnf install clang # https://fedora.pkgs.org/34/fedora-x86_64/clang-12.0.0-0.3.rc1.fc34.x86_64.rpm.html
$ yarn build

# 全部完成！现在可以运行测试用例或示例：
$ yarn test
$ node example/tiger.js

从 GitHub 拉取预构建的 skia 二进制文件

如果你只关心 Rust 部分，可以拉取 skia 的预构建二进制文件：

# 克隆代码：
$ git clone --recurse-submodules https://github.com/Brooooooklyn/canvas.git
$ cd canvas

# 下载 Skia 二进制文件：
# 它将拉取与 `./skia` 子模块中 git hash 匹配的二进制文件
$ node scripts/release-skia-binary.mjs --download

# 安装 NPM 包，构建 Node.js 插件：
$ npm install -g yarn
$ yarn install --mode=skip-build
$ sudo dnf install clang # https://fedora.pkgs.org/34/fedora-x86_64/clang-12.0.0-0.3.rc1.fc34.x86_64.rpm.html
$ yarn build

# 全部完成！现在可以运行测试用例或示例：
$ yarn test
$ node example/tiger.js

编辑推荐精选

TRAE编程

TRAE编程

AI辅助编程，代码自动修复

Trae是一种自适应的集成开发环境（IDE），通过自动化和多元协作改变开发流程。利用Trae，团队能够更快速、精确地编写和部署代码，从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能，是提升开发效率的理想工具。

AI工具TraeAI IDE协作生产力转型热门
博思AIPPT

博思AIPPT

AI一键生成PPT，就用博思AIPPT！

博思AIPPT，新一代的AI生成PPT平台，支持智能生成PPT、AI美化PPT、文本&链接生成PPT、导入Word/PDF/Markdown文档生成PPT等，内置海量精美PPT模板，涵盖商务、教育、科技等不同风格，同时针对每个页面提供多种版式，一键自适应切换，完美适配各种办公场景。

AI办公办公工具AI工具博思AIPPTAI生成PPT智能排版海量精品模板AI创作热门
潮际好麦

潮际好麦

AI赋能电商视觉革命，一站式智能商拍平台

潮际好麦深耕服装行业，是国内AI试衣效果最好的软件。使用先进AIGC能力为电商卖家批量提供优质的、低成本的商拍图。合作品牌有Shein、Lazada、安踏、百丽等65个国内外头部品牌，以及国内10万+淘宝、天猫、京东等主流平台的品牌商家，为卖家节省将近85%的出图成本，提升约3倍出图效率，让品牌能够快速上架。

iTerms

iTerms

企业专属的AI法律顾问

iTerms是法大大集团旗下法律子品牌，基于最先进的大语言模型(LLM)、专业的法律知识库和强大的智能体架构，帮助企业扫清合规障碍，筑牢风控防线，成为您企业专属的AI法律顾问。

SimilarWeb流量提升

SimilarWeb流量提升

稳定高效的流量提升解决方案，助力品牌曝光

稳定高效的流量提升解决方案，助力品牌曝光

Sora2视频免费生成

Sora2视频免费生成

最新版Sora2模型免费使用，一键生成无水印视频

最新版Sora2模型免费使用，一键生成无水印视频

Transly

Transly

实时语音翻译/同声传译工具

Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手，它拥有超精准的音频识别翻译能力，几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球，无论你是留学生、商务人士、韩剧美剧爱好者，还是出国游玩、多国会议、跨国追星等等，都可以满足你所有需要同传的场景需求，线上线下通用，扫除语言障碍，让全世界的语言交流不再有国界。

讯飞绘文

讯飞绘文

选题、配图、成文，一站式创作，让内容运营更高效

讯飞绘文，一个AI集成平台，支持写作、选题、配图、排版和发布。高效生成适用于各类媒体的定制内容，加速品牌传播，提升内容营销效果。

热门AI辅助写作AI工具讯飞绘文内容运营AI创作个性化文章多平台分发AI助手
商汤小浣熊

商汤小浣熊

最强AI数据分析助手

小浣熊家族Raccoon，您的AI智能助手，致力于通过先进的人工智能技术，为用户提供高效、便捷的智能服务。无论是日常咨询还是专业问题解答，小浣熊都能以快速、准确的响应满足您的需求，让您的生活更加智能便捷。

imini AI

imini AI

像人一样思考的AI智能体

imini 是一款超级AI智能体，能根据人类指令，自主思考、自主完成、并且交付结果的AI智能体。

下拉加载更多