Skip to content

Commit

Permalink
feat: add svg qrcode
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dafnik
Dafnik committed Feb 2, 2024
1 parent 4dd8740 commit c4817f6
Show file tree
Hide file tree
Showing 3 changed files with 359 additions and 7 deletions.
49 changes: 47 additions & 2 deletions libs/dfts-qrcode/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ Fully type-safe and esm module compatible.
- [Installation](#installation)
- [Usage](#usage)
- [HTMLImageElement](#htmlimageelement)
- [HTMLCanvasElemtn](#htmlcanvaselement)
- [HTMLCanvasElement](#htmlcanvaselement)
- [SVG](#svg)
- [Error Correction Level](#error-correction-level)
- [QR Code capacity](#qr-code-capacity)
- [Encoding modes](#encoding-modes)
Expand Down Expand Up @@ -81,7 +82,7 @@ Options:
```typescript
import { generateQrCodeCanvas$ } from 'dfts-qrcode';

generateQrCodeCanvas$('data', {image: {src: './assets/logo.png'}}).then((qrCode) => {
generateQrCodeCanvas$('data', {image: {src: './assets/logo.png'}}).then((qrcode) => {
...
})
```
Expand All @@ -91,6 +92,50 @@ Options:
- `generateOptions`
- `generateWithImageOptions`

### SVG

#### Without center image

```typescript
import { generateQrCodeSVG } from 'dfts-qrcode';

const { svg, dataUrl } = generateQrCodeSVG('data');
```

Options:

- `generateOptions`
- `generateWithAccessibleOptions`

#### Without center image as string

```typescript
import { generateQrCodeSVGString } from 'dfts-qrcode';

const svgString = generateQrCodeSVGString('data');
```

Options:

- `generateOptions`
- `generateWithAccessibleOptions`

#### With center image

```typescript
import { generateQrCodeSVG$ } from 'dfts-qrcode';

generateQrCodeSVG$('data', {image: {src: './assets/logo.png'}}).then(({ svg, dataUrl }) => {
...
})
```

Options:

- `generateOptions`
- `generateWithAccessibleOptions`
- `generateWithImageOptions`

### QR-Code Matrix

```typescript
Expand Down
233 changes: 232 additions & 1 deletion libs/dfts-qrcode/src/lib/qrcode.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,237 @@
import { generateQrCodeMatrix } from './qrcode';
import { generateQrCodeMatrix, generateQrCodeSVGString } from "./qrcode";
import { s_stripWhitespace } from "dfts-helper";

describe('QRCode', () => {
it('generate correct Numeric qrcode svg', () => {
const test = generateQrCodeSVGString('123456798', { mode: 'numeric' })
console.log(test)
expect(s_stripWhitespace(test)).toEqual(s_stripWhitespace(`<svg xmlns="http://www.w3.org/2000/svg"
width="145" height="145" >
<rect width="145" height="145" fill="#ffffff" />
<rect x="20" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="25" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="35" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="40" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="45" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="65" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="70" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="75" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="80" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="95" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="100" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="105" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="110" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="115" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="20" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="25" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="25" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="25" width="5.3" height="5.3" fill="#000000" />
<rect x="65" y="25" width="5.3" height="5.3" fill="#000000" />
<rect x="75" y="25" width="5.3" height="5.3" fill="#000000" />
<rect x="80" y="25" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="25" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="25" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="35" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="40" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="65" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="70" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="75" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="100" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="105" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="110" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="30" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="35" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="40" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="65" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="75" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="80" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="100" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="105" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="110" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="35" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="40" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="40" width="5.3" height="5.3" fill="#000000" />
<rect x="35" y="40" width="5.3" height="5.3" fill="#000000" />
<rect x="40" y="40" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="40" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="40" width="5.3" height="5.3" fill="#000000" />
<rect x="80" y="40" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="40" width="5.3" height="5.3" fill="#000000" />
<rect x="100" y="40" width="5.3" height="5.3" fill="#000000" />
<rect x="105" y="40" width="5.3" height="5.3" fill="#000000" />
<rect x="110" y="40" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="40" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="45" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="45" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="45" width="5.3" height="5.3" fill="#000000" />
<rect x="70" y="45" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="45" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="45" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="25" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="35" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="40" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="45" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="70" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="80" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="95" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="100" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="105" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="110" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="115" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="50" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="55" width="5.3" height="5.3" fill="#000000" />
<rect x="65" y="55" width="5.3" height="5.3" fill="#000000" />
<rect x="70" y="55" width="5.3" height="5.3" fill="#000000" />
<rect x="75" y="55" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="25" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="45" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="65" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="70" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="75" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="80" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="85" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="95" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="100" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="115" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="60" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="65" width="5.3" height="5.3" fill="#000000" />
<rect x="40" y="65" width="5.3" height="5.3" fill="#000000" />
<rect x="45" y="65" width="5.3" height="5.3" fill="#000000" />
<rect x="65" y="65" width="5.3" height="5.3" fill="#000000" />
<rect x="70" y="65" width="5.3" height="5.3" fill="#000000" />
<rect x="105" y="65" width="5.3" height="5.3" fill="#000000" />
<rect x="115" y="65" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="65" width="5.3" height="5.3" fill="#000000" />
<rect x="25" y="70" width="5.3" height="5.3" fill="#000000" />
<rect x="40" y="70" width="5.3" height="5.3" fill="#000000" />
<rect x="45" y="70" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="70" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="70" width="5.3" height="5.3" fill="#000000" />
<rect x="70" y="70" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="70" width="5.3" height="5.3" fill="#000000" />
<rect x="115" y="70" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="75" width="5.3" height="5.3" fill="#000000" />
<rect x="55" y="75" width="5.3" height="5.3" fill="#000000" />
<rect x="65" y="75" width="5.3" height="5.3" fill="#000000" />
<rect x="80" y="75" width="5.3" height="5.3" fill="#000000" />
<rect x="100" y="75" width="5.3" height="5.3" fill="#000000" />
<rect x="115" y="75" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="75" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="80" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="80" width="5.3" height="5.3" fill="#000000" />
<rect x="35" y="80" width="5.3" height="5.3" fill="#000000" />
<rect x="45" y="80" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="80" width="5.3" height="5.3" fill="#000000" />
<rect x="70" y="80" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="80" width="5.3" height="5.3" fill="#000000" />
<rect x="105" y="80" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="80" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="85" width="5.3" height="5.3" fill="#000000" />
<rect x="65" y="85" width="5.3" height="5.3" fill="#000000" />
<rect x="70" y="85" width="5.3" height="5.3" fill="#000000" />
<rect x="75" y="85" width="5.3" height="5.3" fill="#000000" />
<rect x="85" y="85" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="85" width="5.3" height="5.3" fill="#000000" />
<rect x="95" y="85" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="25" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="35" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="40" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="45" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="75" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="80" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="85" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="95" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="100" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="90" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="95" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="95" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="95" width="5.3" height="5.3" fill="#000000" />
<rect x="70" y="95" width="5.3" height="5.3" fill="#000000" />
<rect x="75" y="95" width="5.3" height="5.3" fill="#000000" />
<rect x="85" y="95" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="95" width="5.3" height="5.3" fill="#000000" />
<rect x="95" y="95" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="95" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="35" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="40" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="70" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="75" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="80" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="85" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="95" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="100" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="110" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="115" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="100" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="105" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="105" width="5.3" height="5.3" fill="#000000" />
<rect x="35" y="105" width="5.3" height="5.3" fill="#000000" />
<rect x="40" y="105" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="105" width="5.3" height="5.3" fill="#000000" />
<rect x="65" y="105" width="5.3" height="5.3" fill="#000000" />
<rect x="105" y="105" width="5.3" height="5.3" fill="#000000" />
<rect x="110" y="105" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="110" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="110" width="5.3" height="5.3" fill="#000000" />
<rect x="35" y="110" width="5.3" height="5.3" fill="#000000" />
<rect x="40" y="110" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="110" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="110" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="110" width="5.3" height="5.3" fill="#000000" />
<rect x="105" y="110" width="5.3" height="5.3" fill="#000000" />
<rect x="115" y="110" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="110" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="115" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="115" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="115" width="5.3" height="5.3" fill="#000000" />
<rect x="65" y="115" width="5.3" height="5.3" fill="#000000" />
<rect x="80" y="115" width="5.3" height="5.3" fill="#000000" />
<rect x="100" y="115" width="5.3" height="5.3" fill="#000000" />
<rect x="115" y="115" width="5.3" height="5.3" fill="#000000" />
<rect x="20" y="120" width="5.3" height="5.3" fill="#000000" />
<rect x="25" y="120" width="5.3" height="5.3" fill="#000000" />
<rect x="30" y="120" width="5.3" height="5.3" fill="#000000" />
<rect x="35" y="120" width="5.3" height="5.3" fill="#000000" />
<rect x="40" y="120" width="5.3" height="5.3" fill="#000000" />
<rect x="45" y="120" width="5.3" height="5.3" fill="#000000" />
<rect x="50" y="120" width="5.3" height="5.3" fill="#000000" />
<rect x="60" y="120" width="5.3" height="5.3" fill="#000000" />
<rect x="90" y="120" width="5.3" height="5.3" fill="#000000" />
<rect x="105" y="120" width="5.3" height="5.3" fill="#000000" />
<rect x="110" y="120" width="5.3" height="5.3" fill="#000000" />
<rect x="115" y="120" width="5.3" height="5.3" fill="#000000" />
<rect x="120" y="120" width="5.3" height="5.3" fill="#000000" />
</svg>`));
});
it('generate correct Numeric qrcode matrix', () => {
expect(generateQrCodeMatrix('123456798', { mode: 'numeric' })).toStrictEqual([
[1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1],
Expand Down

0 comments on commit c4817f6

Please sign in to comment.