@zebrash/browser 1.0.1 → 1.0.3
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 +85 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
# @zebrash/browser
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@zebrash/browser)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
|
|
6
|
+
Render [ZPL II](https://en.wikipedia.org/wiki/Zebra_Programming_Language) labels
|
|
7
|
+
to PNG or SVG in the browser. Pure-TypeScript port of
|
|
8
|
+
[ingridhq/zebrash](https://github.com/ingridhq/zebrash). Uses native
|
|
9
|
+
`OffscreenCanvas` + `FontFace`. Zero native deps, no WASM, no Go subprocess.
|
|
10
|
+
A free, local alternative to
|
|
11
|
+
[labelary.com/viewer.html](https://labelary.com/viewer.html) — preview labels
|
|
12
|
+
without sending data to a third party.
|
|
13
|
+
|
|
14
|
+
## Install
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @zebrash/browser
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
import { Parser, Drawer } from "@zebrash/browser";
|
|
24
|
+
|
|
25
|
+
const labels = new Parser().parse(zpl);
|
|
26
|
+
|
|
27
|
+
const png = await new Drawer().drawLabelAsPng(labels[0], {
|
|
28
|
+
labelWidthMm: 101.6, // 4 in
|
|
29
|
+
labelHeightMm: 203.2, // 8 in
|
|
30
|
+
dpmm: 8, // 203 dpi
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
const url = URL.createObjectURL(new Blob([png], { type: "image/png" }));
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
`drawLabelAsPng` returns a `Uint8Array`. Wrap it in a `Blob` for
|
|
37
|
+
`URL.createObjectURL` or an anchor-tag download.
|
|
38
|
+
|
|
39
|
+
## Fonts
|
|
40
|
+
|
|
41
|
+
The four bundled TTFs (Helvetica, DejaVu Sans Mono ± bold, ZPL GS) are
|
|
42
|
+
lazy-fetched from jsdelivr on first render. To self-host them (CSP, offline,
|
|
43
|
+
version-pinning), override the base URL:
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
import { setFontBaseUrl } from "@zebrash/browser";
|
|
47
|
+
setFontBaseUrl("/static/zebrash-fonts/");
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## SVG output
|
|
51
|
+
|
|
52
|
+
```ts
|
|
53
|
+
const svg = await new Drawer().drawLabelAsSvg(labels[0], {
|
|
54
|
+
labelWidthMm: 101.6,
|
|
55
|
+
labelHeightMm: 203.2,
|
|
56
|
+
dpmm: 8,
|
|
57
|
+
fontEmbed: "url", // "url" | "embed" | "none"
|
|
58
|
+
});
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Returns a `Promise<string>`. Real `<rect>` per barcode module, real `<text>`
|
|
62
|
+
per `^FD` field. Only `^GF` bitmaps fall back to embedded raster.
|
|
63
|
+
|
|
64
|
+
| `fontEmbed` | Emits | When |
|
|
65
|
+
| ----------- | ----------------------------------------------- | ------------------------------------------------ |
|
|
66
|
+
| `"url"` | `@font-face src: url("<cdn>/font.ttf")` | **Default.** Browser embedding, small file size. |
|
|
67
|
+
| `"embed"` | `@font-face src: url("data:font/ttf;base64,…")` | Offline / PDF-export. Adds 54 KB–900 KB per SVG. |
|
|
68
|
+
| `"none"` | `font-family` only, no `@font-face` | Renderer already has fonts. Smallest output. |
|
|
69
|
+
|
|
70
|
+
Reverse-print elements (`^FR`) are wrapped in
|
|
71
|
+
`<g style="mix-blend-mode: difference">` — XOR-equivalent for monochrome.
|
|
72
|
+
|
|
73
|
+
## Node.js?
|
|
74
|
+
|
|
75
|
+
Use [`@zebrash/node`](https://www.npmjs.com/package/@zebrash/node) — same API,
|
|
76
|
+
Skia-backed via `@napi-rs/canvas`.
|
|
77
|
+
|
|
78
|
+
## Documentation
|
|
79
|
+
|
|
80
|
+
Full docs, supported ZPL command surface, and the `DrawerOptions` reference
|
|
81
|
+
live in the [main README](https://github.com/Fountain-Bio/zebrash-ts#readme).
|
|
82
|
+
|
|
83
|
+
## License
|
|
84
|
+
|
|
85
|
+
MIT.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zebrash/browser",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "Render ZPL labels to PNG or SVG in the browser. Pure TypeScript port of ingridhq/zebrash. Zero native deps.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"barcode",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@zebrash/core": "1.0.
|
|
46
|
+
"@zebrash/core": "1.0.3",
|
|
47
47
|
"fflate": "^0.8.2"
|
|
48
48
|
},
|
|
49
49
|
"engines": {
|