skia-canvas 0.9.28 → 0.9.29
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/CHANGELOG.md +29 -8
- package/README.md +27 -42
- package/lib/index.d.ts +3 -0
- package/lib/index.js +10 -2
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,25 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
<!-- ## 🥚 ⟩ [Unreleased]
|
|
3
|
+
<!-- ## 🥚 ⟩ [Unreleased] -->
|
|
4
|
+
|
|
5
|
+
## 📦 ⟩ [v0.9.29] ⟩ Feb 7, 2022
|
|
6
|
+
|
|
7
|
+
### New Features
|
|
8
|
+
- PDF exports now support the optional [`matte`][matte] argument.
|
|
9
|
+
|
|
10
|
+
### Breaking Changes
|
|
11
|
+
- When the [`drawImage()`][mdn_drawImage] function is passed a **Canvas** object as its image source it will now rasterize the canvas before drawing. The prior behavior (in which it is drawn as a vector graphic) can now be accessed through the new [`drawCanvas()`][drawCanvas] method which supports the same numerical arguments as `drawImage` but requires that its first argument be a **Canvas**.
|
|
12
|
+
|
|
13
|
+
### Bugfixes
|
|
14
|
+
- Regions erased using [`clearRect()`][mdn_clearRect] are now properly antialiased
|
|
15
|
+
- The [`clip()`][mdn_clip] method now interprets the current translate/scale/rotate state correctly when combining clipping masks
|
|
16
|
+
|
|
17
|
+
### Misc. Improvements
|
|
18
|
+
- Upgraded Skia to milestone 97
|
|
19
|
+
|
|
20
|
+
[drawCanvas]: https://github.com/samizdatco/skia-canvas#drawcanvascanvas-x-y-
|
|
21
|
+
[mdn_clip]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
|
|
22
|
+
[mdn_clearRect]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect
|
|
4
23
|
|
|
5
24
|
## 📦 ⟩ [v0.9.28] ⟩ Jan 12, 2022
|
|
6
25
|
|
|
@@ -10,7 +29,7 @@
|
|
|
10
29
|
- Colors can now use the [hwb()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hwb()) model
|
|
11
30
|
|
|
12
31
|
### Breaking Changes
|
|
13
|
-
- The **Canvas** [`.async`](https://github.com/samizdatco/skia-canvas#async) property has been **deprecated** and will be removed in a future release.
|
|
32
|
+
- The **Canvas** [`.async`](https://github.com/samizdatco/skia-canvas#async) property has been **deprecated** and will be removed in a future release.
|
|
14
33
|
- The `saveAs`, `toBuffer`, and `toDataURL` methods will now be async-only (likewise the [shorthand properties](https://github.com/samizdatco/skia-canvas#pdf-svg-jpg-and-png)).
|
|
15
34
|
- Use their synchronous counterparts (`saveAsSync`, `toBufferSync`, and `toDataURLSync`) if you want to block execution while exporting images.
|
|
16
35
|
- The [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData/ImageData) constructor now orders its arguments properly: the optional buffer/array argument now comes first
|
|
@@ -29,7 +48,7 @@
|
|
|
29
48
|
|
|
30
49
|
|
|
31
50
|
## 📦 ⟩ [v0.9.27] ⟩ Oct 23, 2021
|
|
32
|
-
|
|
51
|
+
|
|
33
52
|
### New Features
|
|
34
53
|
- Added pre-compiled binaries for Alpine Linux using the [musl](https://musl.libc.org) C library
|
|
35
54
|
|
|
@@ -41,7 +60,7 @@
|
|
|
41
60
|
|
|
42
61
|
### Bugfixes
|
|
43
62
|
- Windows text rendering has been restored after failing due to changes involving the `icudtl.dat` file
|
|
44
|
-
- `FontLibrary.use` now reports an error if the specified font file doesn't exist
|
|
63
|
+
- `FontLibrary.use` now reports an error if the specified font file doesn't exist
|
|
45
64
|
- Fixed a crash that could result from calling `measureText` with various unicode escapes
|
|
46
65
|
|
|
47
66
|
### Misc. Improvements
|
|
@@ -52,7 +71,7 @@
|
|
|
52
71
|
## 📦 ⟩ [v0.9.25] ⟩ Aug 22, 2021
|
|
53
72
|
|
|
54
73
|
### Bugfixes
|
|
55
|
-
- Improved image scaling when a larger image is being shrunk down to a smaller size via [`drawImage()`]
|
|
74
|
+
- Improved image scaling when a larger image is being shrunk down to a smaller size via [`drawImage()`][mdn_drawImage]
|
|
56
75
|
- modified [`imageSmoothingQuality`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality) settings to provide a more meaningful range across `low`, `medium`, and `high`
|
|
57
76
|
- [`measureText()`](https://github.com/samizdatco/skia-canvas#measuretextstr-width) now returns correct metrics regardless of current `textAlign` setting
|
|
58
77
|
- Rolled back `icudtl.dat` changes on Windows (which suppressed the misleading warning message but required running as Administrator)
|
|
@@ -60,6 +79,7 @@
|
|
|
60
79
|
### Misc. Improvements
|
|
61
80
|
- Now using [Neon](https://github.com/neon-bindings/neon) v0.9 (with enhanced async event scheduling)
|
|
62
81
|
|
|
82
|
+
[mdn_drawImage]: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
|
|
63
83
|
|
|
64
84
|
## 📦 ⟩ [v0.9.24] ⟩ Aug 18, 2021
|
|
65
85
|
|
|
@@ -106,7 +126,7 @@
|
|
|
106
126
|
### Misc. Improvements
|
|
107
127
|
|
|
108
128
|
- The `newPage()` and `saveAs()` methods now work in the browser, including the ability to save image sequences to a zip archive. The browser’s canvas is still doing all the drawing however, so file export formats will be limited to PNG and JPEG and none of the other Skia-specific extensions will be available.
|
|
109
|
-
- The file-export methods now accept a [`matte`][matte] value in their options object which can be used to set the background color for any portions of the canvas that were left semi-transparent
|
|
129
|
+
- The file-export methods now accept a [`matte`][matte] value in their options object which can be used to set the background color for any portions of the canvas that were left semi-transparent
|
|
110
130
|
- Canvas dimensions are no longer rounded-off to integer values (at least until a bitmap needs to be generated for export)
|
|
111
131
|
- Linux builds will now run on some older systems going back to glibc 2.24
|
|
112
132
|
|
|
@@ -133,7 +153,7 @@
|
|
|
133
153
|
### New Features
|
|
134
154
|
|
|
135
155
|
- Rasterization and file i/o are now handled asynchronously in a background thread. See the discussion of Canvas’s new [`async`](https://github.com/samizdatco/skia-canvas#async) property for details.
|
|
136
|
-
- Output files can now be generated at pixel-ratios > 1 for High-DPI screens. `SaveAs` and the other canvas output functions all accept an optional [`density`](https://github.com/samizdatco/skia-canvas#density) argument which is an integer ≥1 and will upscale the image accordingly. The density can also be passed using the `filename` argument by ending the name with an ‘@’ suffix like `some-image@2x.png`.
|
|
156
|
+
- Output files can now be generated at pixel-ratios > 1 for High-DPI screens. `SaveAs` and the other canvas output functions all accept an optional [`density`](https://github.com/samizdatco/skia-canvas#density) argument which is an integer ≥1 and will upscale the image accordingly. The density can also be passed using the `filename` argument by ending the name with an ‘@’ suffix like `some-image@2x.png`.
|
|
137
157
|
- SVG exports can optionally convert text to paths by setting the [`outline`](https://github.com/samizdatco/skia-canvas#outline) argument to `true`.
|
|
138
158
|
|
|
139
159
|
### Breaking Changes
|
|
@@ -182,7 +202,8 @@
|
|
|
182
202
|
|
|
183
203
|
**Initial public release** 🎉
|
|
184
204
|
|
|
185
|
-
[unreleased]: https://github.com/samizdatco/skia-canvas/compare/v0.9.
|
|
205
|
+
[unreleased]: https://github.com/samizdatco/skia-canvas/compare/v0.9.29...HEAD
|
|
206
|
+
[v0.9.29]: https://github.com/samizdatco/skia-canvas/compare/v0.9.28...v0.9.29
|
|
186
207
|
[v0.9.28]: https://github.com/samizdatco/skia-canvas/compare/v0.9.27...v0.9.28
|
|
187
208
|
[v0.9.27]: https://github.com/samizdatco/skia-canvas/compare/v0.9.26...v0.9.27
|
|
188
209
|
[v0.9.26]: https://github.com/samizdatco/skia-canvas/compare/v0.9.25...v0.9.26
|
package/README.md
CHANGED
|
@@ -287,48 +287,18 @@ This method accepts the same arguments and behaves similarly to `.toBuffer`. How
|
|
|
287
287
|
|
|
288
288
|
Most of your interaction with the canvas will actually be directed toward its ‘rendering context’, a supporting object you can acquire by calling the canvas’s [getContext()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) and [newPage()][newPage] methods.
|
|
289
289
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
| [**
|
|
294
|
-
| [
|
|
295
|
-
| [
|
|
296
|
-
| [
|
|
297
|
-
| [
|
|
298
|
-
| [
|
|
299
|
-
| [
|
|
300
|
-
|
|
|
301
|
-
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
| Bezier Paths | Typography | Images | Compositing Effects |
|
|
320
|
-
|------------------------------------------|-------------------------------------------------------------|----------------------------------------------------|----------------------------------------------------------|
|
|
321
|
-
| [moveTo()][moveTo()] | [**direction**][direction] | [**imageSmoothingEnabled**][imageSmoothingEnabled] | [**filter**][filter] |
|
|
322
|
-
| [lineTo()][lineTo()] | [**font**][font] ⧸[⚡](#font) | [**imageSmoothingQuality**][imageSmoothingQuality] | [**globalAlpha**][globalAlpha] |
|
|
323
|
-
| [arcTo()][arcTo()] | [**fontVariant** ⚡](#fontvariant) | [createImageData()][createImageData()] | [**globalCompositeOperation**][globalCompositeOperation] |
|
|
324
|
-
| [bezierCurveTo()][bezierCurveTo()] | [**textAlign**][textAlign] | [getImageData()][getImageData()] | [**shadowBlur**][shadowBlur] |
|
|
325
|
-
| [conicCurveTo() ⚡][conicCurveTo] | [**textBaseline**][textBaseline] | [putImageData()][putImageData()] | [**shadowColor**][shadowColor] |
|
|
326
|
-
| [quadraticCurveTo()][quadraticCurveTo()] | [**textTracking** ⚡](#texttracking) | [drawImage()][drawImage()] | [**shadowOffsetX**][shadowOffsetX] |
|
|
327
|
-
| [closePath()][closePath()] | [**textWrap** ⚡](#textwrap) | | [**shadowOffsetY**][shadowOffsetY] |
|
|
328
|
-
| [arc()][arc()] | [measureText()][measureText()] ⧸[⚡](#measuretextstr-width) | | |
|
|
329
|
-
| [ellipse()][ellipse()] | [outlineText() ⚡][outlineText()] | | |
|
|
330
|
-
| [rect()][rect()] | | |
|
|
331
|
-
|
|
290
|
+
| Canvas State | Drawing | Pattern & Color | Line Style | Transform | Bezier Paths | Typography | Images | Compositing Effects |
|
|
291
|
+
|-----------------------------------------------|---------------------------------------------------|---------------------------------------------------|----------------------------------------------|--------------------------------------------------|------------------------------------------|------------------------------------------------------------------|----------------------------------------------------|----------------------------------------------------------|
|
|
292
|
+
| [**canvas**][canvas_attr] ⧸[⚡](#canvas) | [clearRect()][clearRect()] | [**fillStyle**][fillStyle] | [**lineCap**][lineCap] | [**currentTransform**][currentTransform] | [moveTo()][moveTo()] | [**direction**][direction] | [**imageSmoothingEnabled**][imageSmoothingEnabled] | [**filter**][filter] |
|
|
293
|
+
| [beginPath()][beginPath()] | [fillRect()][fillRect()] | [**strokeStyle**][strokeStyle] | [**lineDashFit** ⚡][lineDashFit] | [createProjection() ⚡][createProjection()] | [lineTo()][lineTo()] | [**font**][font] ⧸[⚡](#font) | [**imageSmoothingQuality**][imageSmoothingQuality] | [**globalAlpha**][globalAlpha] |
|
|
294
|
+
| [isPointInPath()][isPointInPath()] | [strokeRect()][strokeRect()] | [createConicGradient()][createConicGradient()] | [**lineDashMarker** ⚡][lineDashMarker] | [getTransform()][getTransform()] | [arcTo()][arcTo()] | [**fontVariant** ⚡](#fontvariant) | [createImageData()][createImageData()] | [**globalCompositeOperation**][globalCompositeOperation] |
|
|
295
|
+
| [isPointInStroke()][isPointInStroke()] | [fillText()][fillText()] ⧸[⚡][drawText] | [createLinearGradient()][createLinearGradient()] | [**lineDashOffset**][lineDashOffset] | [setTransform()][setTransform()] | [bezierCurveTo()][bezierCurveTo()] | [**textAlign**][textAlign] | [getImageData()][getImageData()] | [**shadowBlur**][shadowBlur] |
|
|
296
|
+
| [save()][save()] | [strokeText()][strokeText()] ⧸[⚡][drawText] | [createRadialGradient()][createRadialGradient()] | [**lineJoin**][lineJoin] | [resetTransform()][resetTransform()] | [conicCurveTo() ⚡][conicCurveTo] | [**textBaseline**][textBaseline] | [putImageData()][putImageData()] | [**shadowColor**][shadowColor] |
|
|
297
|
+
| [restore()][restore()] | [fill()][fill()] | [createPattern()][createPattern()] | [**lineWidth**][lineWidth] | [transform()][transform()] | [quadraticCurveTo()][quadraticCurveTo()] | [**textTracking** ⚡](#texttracking) | [drawCanvas() ⚡](#drawcanvascanvas-x-y-) | [**shadowOffsetX**][shadowOffsetX] |
|
|
298
|
+
| [clip()][clip()] | [stroke()][stroke()] | [createTexture() ⚡][createTexture()] | [**miterLimit**][miterLimit] | [translate()][translate()] | [closePath()][closePath()] | [**textWrap** ⚡](#textwrap) | [drawImage()][drawImage()] | [**shadowOffsetY**][shadowOffsetY] |
|
|
299
|
+
| | | | [getLineDash()][getLineDash()] | [rotate()][rotate()] | [arc()][arc()] | [measureText()][measureText()] ⧸[⚡](#measuretextstr-width) | | |
|
|
300
|
+
| | | | [setLineDash()][setLineDash()] | [scale()][scale()] | [ellipse()][ellipse()] | [outlineText() ⚡][outlineText()] | | |
|
|
301
|
+
| | | | | | [rect()][rect()] | | |
|
|
332
302
|
|
|
333
303
|
##### PROPERTIES
|
|
334
304
|
|
|
@@ -505,6 +475,21 @@ The rectangle defined by the `spacing` argument will be aligned with the canvas
|
|
|
505
475
|
##### `offset`
|
|
506
476
|
As with `CanvasPattern` objects, textures are positioned globally relative to the upper left corner of the canvas—not the corner of the object currently being filled or stroked. To fine-tune the texture’s alignment with individual objects, set the `offset` argument to an `[x, y]` array with two numbers that will shift the texture relative to its origin.
|
|
507
477
|
|
|
478
|
+
#### `drawCanvas(canvas, x, y, …)`
|
|
479
|
+
This method behaves identically to the standard [`drawImage()`][drawImage()] function with one key difference: if the first argument is a canvas, it will not be converted to a bitmap before being drawn. Instead its contents will be added to the canvas as resolution-independent vector graphics. This is especially useful when scaling or rotating since it preserves the fidelity of text, patterns, and gradients from the source canvas.
|
|
480
|
+
|
|
481
|
+
```js
|
|
482
|
+
let src = new Canvas(10, 10),
|
|
483
|
+
srcCtx = src.getContext("2d");
|
|
484
|
+
srcCtx.font = 'italic 10px Times'
|
|
485
|
+
srcCtx.fillText('¶', 2, 8)
|
|
486
|
+
|
|
487
|
+
let dst = new Canvas(350, 150),
|
|
488
|
+
dstCtx = dst.getContext("2d");
|
|
489
|
+
dstCtx.drawImage(src, 0, 0, 150, 150)
|
|
490
|
+
dstCtx.drawCanvas(src, 200, 0, 150, 150)
|
|
491
|
+
```
|
|
492
|
+
|
|
508
493
|
|
|
509
494
|
#### `fillText(str, x, y, [width])` & `strokeText(str, x, y, [width])`
|
|
510
495
|
|
package/lib/index.d.ts
CHANGED
|
@@ -99,6 +99,9 @@ interface CanvasDrawImage {
|
|
|
99
99
|
drawImage(image: CanvasImageSource, dx: number, dy: number): void;
|
|
100
100
|
drawImage(image: CanvasImageSource, dx: number, dy: number, dw: number, dh: number): void;
|
|
101
101
|
drawImage(image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
|
|
102
|
+
drawCanvas(image: Canvas, dx: number, dy: number): void;
|
|
103
|
+
drawCanvas(image: Canvas, dx: number, dy: number, dw: number, dh: number): void;
|
|
104
|
+
drawCanvas(image: Canvas, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number): void;
|
|
102
105
|
}
|
|
103
106
|
|
|
104
107
|
interface CanvasFillStrokeStyles {
|
package/lib/index.js
CHANGED
|
@@ -412,14 +412,22 @@ class CanvasRenderingContext2D extends RustClass{
|
|
|
412
412
|
|
|
413
413
|
drawImage(image, ...coords){
|
|
414
414
|
if (image instanceof Canvas){
|
|
415
|
-
this.ƒ('
|
|
415
|
+
this.ƒ('drawImage', core(image.getContext('2d')), ...coords)
|
|
416
416
|
}else if (image instanceof Image){
|
|
417
|
-
this.ƒ('
|
|
417
|
+
this.ƒ('drawImage', core(image), ...coords)
|
|
418
418
|
}else{
|
|
419
419
|
throw new Error("Expected an Image or a Canvas argument")
|
|
420
420
|
}
|
|
421
421
|
}
|
|
422
422
|
|
|
423
|
+
drawCanvas(image, ...coords){
|
|
424
|
+
if (image instanceof Canvas){
|
|
425
|
+
this.ƒ('drawCanvas', core(image.getContext('2d')), ...coords)
|
|
426
|
+
}else{
|
|
427
|
+
this.drawImage(image, ...coords)
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
|
|
423
431
|
// -- typography ------------------------------------------------------------
|
|
424
432
|
get font(){ return this.prop('font') }
|
|
425
433
|
set font(str){ this.prop('font', css.font(str)) }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "skia-canvas",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.29",
|
|
4
4
|
"description": "A canvas environment for Node",
|
|
5
5
|
"author": "Christian Swinehart <drafting@samizdat.co>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -29,15 +29,15 @@
|
|
|
29
29
|
"cargo-cp-artifact": "^0.1",
|
|
30
30
|
"glob": "^7.2.0",
|
|
31
31
|
"path-browserify": "^1.0.1",
|
|
32
|
-
"simple-get": "^4.0.
|
|
32
|
+
"simple-get": "^4.0.1",
|
|
33
33
|
"string-split-by": "^1.0.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@types/jest": "^27.4.0",
|
|
37
|
-
"@types/node": "^17.0.
|
|
38
|
-
"aws-sdk": "^2.
|
|
37
|
+
"@types/node": "^17.0.15",
|
|
38
|
+
"aws-sdk": "^2.1069.0",
|
|
39
39
|
"express": "^4.17.2",
|
|
40
|
-
"jest": "^27.
|
|
40
|
+
"jest": "^27.5.0",
|
|
41
41
|
"lodash": "^4.17.21",
|
|
42
42
|
"nodemon": "^2.0.15",
|
|
43
43
|
"tmp": "^0.2.1"
|