You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat(qr-generator): add PNG output, Bun adapter, and file/stream docs 🌸
- Add tests for PNG.createDataURL
- Add Bun file storage adapter and use it first in getDefaultStorage
- Add examples png.ts, to-file.ts, to-file-stream.ts and list in examples README
- Add PNGOptions and PNG encoder (grayscale/RGB) with toPNG API
- Add runtime checks and clear errors in Deno and Node adapters
- Document toPNG, methods overview, and "Pick a Method" table in USAGE
- Reorder types (FinderOptions, QRErrorLevel) and add core PNG types
- Rename Gif helper to GIF and use Stream namespace in GIF encoder
- Update README badges (Node/Deno/Bun/Browser) and feature list for PNG
Generate QR codes as SVG, path, GIF, PNG, ASCII, or canvas with custom shapes, gradients, and logo.
4
6
5
-
Generate QR as SVG, path, GIF, ASCII, or canvas. Seven shapes (rounded, circle, diamond, square, shuriken, star, triangle), finder styling, solid or linear/radial gradients, logo (text/image). Deno (JSR) and npm.
**Prerequisites:** For **Deno** use [Deno](https://deno.com/) (install from [deno.com](https://deno.com/)). For **npm** use Node.js (e.g. [nodejs.org](https://nodejs.org/)).
> Generate preview assets (SVGs; GIFs if `rsvg-convert` is installed): `deno run -A preview/generator.ts`
15
19
16
20
## Features
17
21
18
-
-**Multiple output formats** — SVG string (`toSVG`), raw path data (`toPath`), GIF data URL (`toDataURL`), ASCII art (`toASCII`), table/img HTML (`toTableTag`, `toImgTag`), and canvas rendering (`toCanvas`).
22
+
-**Multiple output formats** — SVG string (`toSVG`), raw path data (`toPath`), GIF data URL (`toDataURL`), PNG data URL (`toPNG`), ASCII art (`toASCII`), table/img HTML (`toTableTag`, `toImgTag`), and canvas rendering (`toCanvas`).
19
23
-**Finder pattern styling** — Separate shape and gap for the three corner finder patterns.
| Draw on my own canvas |`QRCode.toCanvas`|`toCanvas(ctx, { value: '…' })`|
44
+
| Get an SVG to show or save |`QRCode.toSVG`|`toSVG({ value: '…', size: 400 })`|
45
+
| Get GIF for `<img>` or download |`QRCode.toDataURL`|`toDataURL({ value: '…' })`|
46
+
| Get HTML table |`QRCode.toTableTag`|`toTableTag({ value: '…' })`|
47
+
| Get path string for custom draw |`QRCode.toPath`|`toPath({ value: '…', size: 400 })`|
48
+
| Get PNG for `<img>` or download |`QRCode.toPNG`|`await QRCode.toPNG({ value: '…', color: '#000', background: '#fff' })`|
49
+
| Print QR in terminal |`QRCode.toASCII`|`toASCII({ value: '…' })`|
50
+
| Write SVG to file or download |`QRCode.toFile`|`toFile('out.svg', { value: '…', size: 400 })`|
51
+
| Write SVG to a stream |`QRCode.toFileStream`|`toFileStream(stream, { value: '…', size: 400 })`|
52
+
53
+
> [!NOTE]
54
+
> Every method needs at least `value` (the text or URL to encode). `toSVG`, `toPath`, `toFile`, and `toFileStream` also need `size` (width/height in pixels). `toASCII`, `toDataURL`, `toPNG`, and `toTableTag` use optional `cellSize` and `margin` for dimensions.
Returns a PNG data URL with optional hex foreground and background. Uses **PNGOptions**: required `value`; optional `error`, `cellSize`, `margin`, `color`, `background`. When both `color` and `background` are set the output is RGB; otherwise grayscale. Defaults: cellSize 2, margin cellSize×4.
205
+
206
+
```typescript
207
+
const pngUrl =awaitQRCode.toPNG({
208
+
value: 'hello-world',
209
+
cellSize: 10,
210
+
margin: 25,
211
+
color: '#0f172a',
212
+
background: '#f1f5f9'
213
+
})
214
+
// pngUrl: data:image/png;base64,...
215
+
```
216
+
171
217
### toCanvas
172
218
173
219
Draws the QR on a 2D canvas context. Uses **FormatOptions** (`value`, optional `error`, `cellSize`); `margin` is not used. Default cellSize is 2.
| Print QR in terminal |`QRCode.toASCII`|`toASCII({ value: '…' })`|
201
-
| Draw on my own canvas |`QRCode.toCanvas`|`toCanvas(ctx, { value: '…' })`|
202
-
| Get image for `<img>` or download |`QRCode.toDataURL`|`toDataURL({ value: '…' })`|
203
-
| Write SVG to file or download |`QRCode.toFile`|`toFile('out.svg', { value: '…', size: 400 })`|
204
-
| Write SVG to a stream |`QRCode.toFileStream`|`toFileStream(stream, { value: '…', size: 400 })`|
205
-
| Get path string for custom draw |`QRCode.toPath`|`toPath({ value: '…', size: 400 })`|
206
-
| Get an SVG to show or save |`QRCode.toSVG`|`toSVG({ value: '…', size: 400 })`|
207
-
| Get HTML table |`QRCode.toTableTag`|`toTableTag({ value: '…' })`|
208
-
209
-
> [!NOTE]
210
-
> Every method needs at least `value` (the text or URL to encode). `toSVG`, `toPath`, `toFile`, and `toFileStream` also need `size` (width/height in pixels).
211
-
212
229
## API Reference
213
230
214
231
### QRCode.toASCII(options)
@@ -230,7 +247,7 @@ Use when you already have a `<canvas>` and its 2D context and want to draw the Q
230
247
231
248
### QRCode.toDataURL(options)
232
249
233
-
Use when you need a data URL for `<img src="…">` or for download (e.g. "Save as image").
250
+
Use when you need a data URL for `<img src="…">` or for download (e.g. "Save as image"). Output is GIF.
- Encodes value, builds matrix, applies shape options and logo cutout, returns path `d` and cell size.
263
280
281
+
### QRCode.toPNG(options)
282
+
283
+
Use when you need a PNG data URL for `<img src="…">` or for download, with optional foreground/background hex colors.
284
+
285
+
-`options``<PNGOptions>`: `value` (required), `error?`, `cellSize?`, `margin?`, `color?`, `background?`. Same as FormatOptions plus optional hex `color` and `background`; when both are set the PNG is RGB, otherwise grayscale.
Use when you need a full SVG string (e.g. inject in HTML, save as `.svg`, or send from API).
@@ -278,17 +303,18 @@ Use when you need an HTML `<table>` snippet (e.g. email or legacy layout).
278
303
279
304
## Option Types
280
305
281
-
Types are exported for TypeScript: `import type { SVGOptions, FormatOptions, PathResult } from '@neabyte/qr-generator'`.
306
+
Types are exported for TypeScript: `import type { ColorOption, FormatOptions, PathResult, PNGOptions, QRCodeOptions, SVGOptions, WritableStreamLike } from '@neabyte/qr-generator'`.
0 commit comments