@napi-rs/canvas 0.1.84 → 0.1.86
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +87 -1
- package/index.d.ts +96 -0
- package/index.js +3 -0
- package/package.json +35 -26
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# `skr canvas`
|
|
2
2
|
|
|
3
3
|
[](https://github.com/Brooooooklyn/canvas/actions/workflows/CI.yaml)
|
|
4
|
-
|
|
5
5
|
[](https://packagephobia.com/result?p=@napi-rs/canvas)
|
|
6
6
|
[](https://npmcharts.com/compare/@napi-rs/canvas?minimal=true)
|
|
7
7
|
|
|
@@ -298,6 +298,92 @@ path.simplify().toSVGString()
|
|
|
298
298
|
// => "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"
|
|
299
299
|
```
|
|
300
300
|
|
|
301
|
+
## Lottie Animation
|
|
302
|
+
|
|
303
|
+
Render [Lottie](https://airbnb.io/lottie/) animations using Skia's [Skottie](https://skia.org/docs/user/modules/skottie/) module.
|
|
304
|
+
|
|
305
|
+
### Load Animation
|
|
306
|
+
|
|
307
|
+
```js
|
|
308
|
+
const { LottieAnimation } = require('@napi-rs/canvas')
|
|
309
|
+
|
|
310
|
+
// Load from file
|
|
311
|
+
const animation = LottieAnimation.loadFromFile('animation.json')
|
|
312
|
+
|
|
313
|
+
// Load from JSON string with resource path for external assets
|
|
314
|
+
const animation = LottieAnimation.loadFromData(jsonString, {
|
|
315
|
+
resourcePath: '/path/to/assets',
|
|
316
|
+
})
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
### Animation Properties
|
|
320
|
+
|
|
321
|
+
```js
|
|
322
|
+
animation.duration // Total duration in seconds
|
|
323
|
+
animation.fps // Frames per second
|
|
324
|
+
animation.frames // Total frame count
|
|
325
|
+
animation.width // Animation width
|
|
326
|
+
animation.height // Animation height
|
|
327
|
+
animation.version // Lottie format version
|
|
328
|
+
```
|
|
329
|
+
|
|
330
|
+
### Playback Control
|
|
331
|
+
|
|
332
|
+
```js
|
|
333
|
+
animation.seekFrame(30) // Seek to frame 30
|
|
334
|
+
animation.seek(1.5) // Seek to 1.5 seconds
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
### Render to Canvas
|
|
338
|
+
|
|
339
|
+
```js
|
|
340
|
+
const { createCanvas, LottieAnimation } = require('@napi-rs/canvas')
|
|
341
|
+
|
|
342
|
+
const animation = LottieAnimation.loadFromFile('animation.json')
|
|
343
|
+
const canvas = createCanvas(animation.width, animation.height)
|
|
344
|
+
const ctx = canvas.getContext('2d')
|
|
345
|
+
|
|
346
|
+
// Render at original size
|
|
347
|
+
animation.render(ctx)
|
|
348
|
+
|
|
349
|
+
// Render with custom destination rect
|
|
350
|
+
animation.render(ctx, { x: 0, y: 0, width: 800, height: 600 })
|
|
351
|
+
```
|
|
352
|
+
|
|
353
|
+
### Supported Features
|
|
354
|
+
|
|
355
|
+
- **Embedded images** - Base64-encoded images (`data:image/png;base64,...`)
|
|
356
|
+
- **Embedded fonts** - Vector glyph paths for text rendering without system fonts
|
|
357
|
+
- **External assets** - Load images from `resourcePath` directory
|
|
358
|
+
- **dotLottie format** - Extract `.lottie` ZIP files at runtime (see example)
|
|
359
|
+
|
|
360
|
+
### Example: Encode Lottie to Video
|
|
361
|
+
|
|
362
|
+
See [`example/lottie-to-video.ts`](./example/lottie-to-video.ts) for encoding Lottie animations to MP4 using [`@napi-rs/webcodecs`](https://github.com/Brooooooklyn/webcodecs-node).
|
|
363
|
+
|
|
364
|
+
```js
|
|
365
|
+
import { createCanvas, LottieAnimation } from '@napi-rs/canvas'
|
|
366
|
+
import {
|
|
367
|
+
VideoEncoder,
|
|
368
|
+
VideoFrame,
|
|
369
|
+
Mp4Muxer,
|
|
370
|
+
type EncodedVideoChunk,
|
|
371
|
+
type EncodedVideoChunkMetadata,
|
|
372
|
+
} from '@napi-rs/webcodecs'
|
|
373
|
+
|
|
374
|
+
const animation = LottieAnimation.loadFromFile('animation.json')
|
|
375
|
+
const canvas = createCanvas(animation.width, animation.height)
|
|
376
|
+
const ctx = canvas.getContext('2d')
|
|
377
|
+
|
|
378
|
+
for (let frame = 0; frame < animation.frames; frame++) {
|
|
379
|
+
animation.seekFrame(frame)
|
|
380
|
+
ctx.fillStyle = '#ffffff'
|
|
381
|
+
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
|
382
|
+
animation.render(ctx)
|
|
383
|
+
// Encode frame to video...
|
|
384
|
+
}
|
|
385
|
+
```
|
|
386
|
+
|
|
301
387
|
# [Example](./example/tiger.js)
|
|
302
388
|
|
|
303
389
|
> The tiger.json was serialized from [gojs/samples/tiger](https://github.com/NorthwoodsSoftware/GoJS/blob/master/samples/tiger.html)
|
package/index.d.ts
CHANGED
|
@@ -957,3 +957,99 @@ export declare class PDFDocument {
|
|
|
957
957
|
endPage(): void
|
|
958
958
|
close(): Buffer
|
|
959
959
|
}
|
|
960
|
+
|
|
961
|
+
export interface LottieAnimationOptions {
|
|
962
|
+
/** Base path for resolving external resources (images, fonts) */
|
|
963
|
+
resourcePath?: string
|
|
964
|
+
}
|
|
965
|
+
|
|
966
|
+
export interface LottieRenderRect {
|
|
967
|
+
x: number
|
|
968
|
+
y: number
|
|
969
|
+
width: number
|
|
970
|
+
height: number
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
/**
|
|
974
|
+
* Lottie animation class for loading and rendering Lottie JSON files.
|
|
975
|
+
*
|
|
976
|
+
* @example
|
|
977
|
+
* ```typescript
|
|
978
|
+
* import { LottieAnimation, createCanvas } from '@napi-rs/canvas'
|
|
979
|
+
*
|
|
980
|
+
* const animation = LottieAnimation.loadFromFile('./animation.json')
|
|
981
|
+
* const canvas = createCanvas(animation.width, animation.height)
|
|
982
|
+
* const ctx = canvas.getContext('2d')
|
|
983
|
+
*
|
|
984
|
+
* // Render frame 0
|
|
985
|
+
* animation.seekFrame(0)
|
|
986
|
+
* animation.render(ctx)
|
|
987
|
+
*
|
|
988
|
+
* // Save to PNG
|
|
989
|
+
* const buffer = canvas.toBuffer('image/png')
|
|
990
|
+
* ```
|
|
991
|
+
*/
|
|
992
|
+
export declare class LottieAnimation {
|
|
993
|
+
/**
|
|
994
|
+
* Load animation from JSON string or Buffer
|
|
995
|
+
* @param data - JSON string or Buffer containing Lottie animation data
|
|
996
|
+
* @param options - Optional configuration
|
|
997
|
+
*/
|
|
998
|
+
static loadFromData(data: string | Buffer, options?: LottieAnimationOptions): LottieAnimation
|
|
999
|
+
|
|
1000
|
+
/**
|
|
1001
|
+
* Load animation from file path
|
|
1002
|
+
* External assets are resolved relative to the file's directory
|
|
1003
|
+
* @param path - Path to the Lottie JSON file
|
|
1004
|
+
*/
|
|
1005
|
+
static loadFromFile(path: string): LottieAnimation
|
|
1006
|
+
|
|
1007
|
+
/** Animation duration in seconds */
|
|
1008
|
+
readonly duration: number
|
|
1009
|
+
|
|
1010
|
+
/** Frame rate (frames per second) */
|
|
1011
|
+
readonly fps: number
|
|
1012
|
+
|
|
1013
|
+
/** Total frame count */
|
|
1014
|
+
readonly frames: number
|
|
1015
|
+
|
|
1016
|
+
/** Animation width in pixels */
|
|
1017
|
+
readonly width: number
|
|
1018
|
+
|
|
1019
|
+
/** Animation height in pixels */
|
|
1020
|
+
readonly height: number
|
|
1021
|
+
|
|
1022
|
+
/** Lottie format version string */
|
|
1023
|
+
readonly version: string
|
|
1024
|
+
|
|
1025
|
+
/** Animation in-point (start frame) */
|
|
1026
|
+
readonly inPoint: number
|
|
1027
|
+
|
|
1028
|
+
/** Animation out-point (end frame) */
|
|
1029
|
+
readonly outPoint: number
|
|
1030
|
+
|
|
1031
|
+
/**
|
|
1032
|
+
* Seek to normalized position
|
|
1033
|
+
* @param t - Position between 0.0 (start) and 1.0 (end)
|
|
1034
|
+
*/
|
|
1035
|
+
seek(t: number): void
|
|
1036
|
+
|
|
1037
|
+
/**
|
|
1038
|
+
* Seek to specific frame index
|
|
1039
|
+
* @param frame - Frame index (0 = first frame)
|
|
1040
|
+
*/
|
|
1041
|
+
seekFrame(frame: number): void
|
|
1042
|
+
|
|
1043
|
+
/**
|
|
1044
|
+
* Seek to specific time in seconds
|
|
1045
|
+
* @param seconds - Time in seconds from start
|
|
1046
|
+
*/
|
|
1047
|
+
seekTime(seconds: number): void
|
|
1048
|
+
|
|
1049
|
+
/**
|
|
1050
|
+
* Render current frame to canvas context
|
|
1051
|
+
* @param ctx - Canvas 2D rendering context
|
|
1052
|
+
* @param dst - Optional destination rectangle for scaling/positioning
|
|
1053
|
+
*/
|
|
1054
|
+
render(ctx: CanvasRenderingContext2D, dst?: LottieRenderRect): void
|
|
1055
|
+
}
|
package/index.js
CHANGED
|
@@ -19,6 +19,7 @@ const {
|
|
|
19
19
|
PdfDocument,
|
|
20
20
|
GifEncoder,
|
|
21
21
|
GifDisposal,
|
|
22
|
+
LottieAnimation,
|
|
22
23
|
} = require('./js-binding')
|
|
23
24
|
|
|
24
25
|
const { DOMPoint, DOMMatrix, DOMRect } = require('./geometry')
|
|
@@ -190,4 +191,6 @@ module.exports = {
|
|
|
190
191
|
// GIF encoding
|
|
191
192
|
GifEncoder,
|
|
192
193
|
GifDisposal,
|
|
194
|
+
// Lottie animation
|
|
195
|
+
LottieAnimation,
|
|
193
196
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@napi-rs/canvas",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.86",
|
|
4
4
|
"description": "Canvas for Node.js with skia backend",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"repository": {
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"x86_64-unknown-linux-gnu",
|
|
38
38
|
"x86_64-apple-darwin",
|
|
39
39
|
"x86_64-pc-windows-msvc",
|
|
40
|
+
"aarch64-pc-windows-msvc",
|
|
40
41
|
"armv7-unknown-linux-gnueabihf",
|
|
41
42
|
"x86_64-unknown-linux-musl",
|
|
42
43
|
"aarch64-unknown-linux-gnu",
|
|
@@ -58,6 +59,7 @@
|
|
|
58
59
|
"bench": "node --import @oxc-node/core/register benchmark/bench.ts",
|
|
59
60
|
"build": "napi build --platform --release --js js-binding.js",
|
|
60
61
|
"build:debug": "napi build --platform --js js-binding.js",
|
|
62
|
+
"example-lottie": "yarn oxnode ./example/lottie-to-video.ts",
|
|
61
63
|
"format": "run-p format:source format:rs format:toml",
|
|
62
64
|
"format:rs": "cargo fmt",
|
|
63
65
|
"format:source": "prettier . -w",
|
|
@@ -75,35 +77,37 @@
|
|
|
75
77
|
"@jimp/custom": "^0.22.12",
|
|
76
78
|
"@jimp/jpeg": "^0.22.12",
|
|
77
79
|
"@jimp/png": "^0.22.12",
|
|
78
|
-
"@napi-rs/cli": "^3.
|
|
79
|
-
"@
|
|
80
|
+
"@napi-rs/cli": "^3.5.0",
|
|
81
|
+
"@napi-rs/webcodecs": "^1.1.1",
|
|
82
|
+
"@octokit/rest": "^22.0.1",
|
|
83
|
+
"@oxc-node/cli": "^0.0.35",
|
|
80
84
|
"@oxc-node/core": "^0.0.35",
|
|
81
85
|
"@taplo/cli": "^0.7.0",
|
|
82
|
-
"@types/lodash": "^4.17.
|
|
83
|
-
"@types/node": "^
|
|
86
|
+
"@types/lodash": "^4.17.21",
|
|
87
|
+
"@types/node": "^25.0.3",
|
|
84
88
|
"@types/semver": "^7",
|
|
85
|
-
"ava": "^6.
|
|
86
|
-
"canvas": "^3.
|
|
89
|
+
"ava": "^6.4.1",
|
|
90
|
+
"canvas": "^3.2.0",
|
|
87
91
|
"canvaskit-wasm": "^0.40.0",
|
|
88
92
|
"colorette": "^2.0.20",
|
|
89
93
|
"conventional-changelog-cli": "^5.0.0",
|
|
90
|
-
"core-js": "^3.
|
|
94
|
+
"core-js": "^3.47.0",
|
|
91
95
|
"echarts": "^6.0.0",
|
|
92
|
-
"electron": "^39.
|
|
96
|
+
"electron": "^39.2.7",
|
|
93
97
|
"husky": "^9.1.7",
|
|
94
|
-
"lint-staged": "^16.
|
|
98
|
+
"lint-staged": "^16.2.7",
|
|
95
99
|
"lodash": "^4.17.21",
|
|
96
100
|
"npm-run-all2": "^8.0.4",
|
|
97
|
-
"oxlint": "^1.
|
|
101
|
+
"oxlint": "^1.34.0",
|
|
98
102
|
"pinst": "^3.0.0",
|
|
99
103
|
"png.js": "^0.2.1",
|
|
100
|
-
"prettier": "^3.
|
|
101
|
-
"pretty-bytes": "^7.
|
|
102
|
-
"semver": "^7.7.
|
|
103
|
-
"skia-canvas": "^3.0.
|
|
104
|
+
"prettier": "^3.7.4",
|
|
105
|
+
"pretty-bytes": "^7.1.0",
|
|
106
|
+
"semver": "^7.7.3",
|
|
107
|
+
"skia-canvas": "^3.0.8",
|
|
104
108
|
"table": "^6.9.0",
|
|
105
109
|
"tinybench": "^6.0.0",
|
|
106
|
-
"typescript": "^5.
|
|
110
|
+
"typescript": "^5.9.3"
|
|
107
111
|
},
|
|
108
112
|
"lint-staged": {
|
|
109
113
|
"*.@(js|ts|tsx|yml|yaml|md|json|html)": [
|
|
@@ -140,17 +144,22 @@
|
|
|
140
144
|
"singleQuote": true,
|
|
141
145
|
"arrowParens": "always"
|
|
142
146
|
},
|
|
147
|
+
"funding": {
|
|
148
|
+
"type": "github",
|
|
149
|
+
"url": "https://github.com/sponsors/Brooooooklyn"
|
|
150
|
+
},
|
|
143
151
|
"packageManager": "yarn@4.12.0",
|
|
144
152
|
"optionalDependencies": {
|
|
145
|
-
"@napi-rs/canvas-linux-x64-gnu": "0.1.
|
|
146
|
-
"@napi-rs/canvas-darwin-x64": "0.1.
|
|
147
|
-
"@napi-rs/canvas-win32-x64-msvc": "0.1.
|
|
148
|
-
"@napi-rs/canvas-
|
|
149
|
-
"@napi-rs/canvas-linux-
|
|
150
|
-
"@napi-rs/canvas-linux-
|
|
151
|
-
"@napi-rs/canvas-linux-arm64-
|
|
152
|
-
"@napi-rs/canvas-
|
|
153
|
-
"@napi-rs/canvas-
|
|
154
|
-
"@napi-rs/canvas-
|
|
153
|
+
"@napi-rs/canvas-linux-x64-gnu": "0.1.86",
|
|
154
|
+
"@napi-rs/canvas-darwin-x64": "0.1.86",
|
|
155
|
+
"@napi-rs/canvas-win32-x64-msvc": "0.1.86",
|
|
156
|
+
"@napi-rs/canvas-win32-arm64-msvc": "0.1.86",
|
|
157
|
+
"@napi-rs/canvas-linux-arm-gnueabihf": "0.1.86",
|
|
158
|
+
"@napi-rs/canvas-linux-x64-musl": "0.1.86",
|
|
159
|
+
"@napi-rs/canvas-linux-arm64-gnu": "0.1.86",
|
|
160
|
+
"@napi-rs/canvas-linux-arm64-musl": "0.1.86",
|
|
161
|
+
"@napi-rs/canvas-darwin-arm64": "0.1.86",
|
|
162
|
+
"@napi-rs/canvas-android-arm64": "0.1.86",
|
|
163
|
+
"@napi-rs/canvas-linux-riscv64-gnu": "0.1.86"
|
|
155
164
|
}
|
|
156
165
|
}
|