QR
IMPORT MODULE

Generate a QR code based on qrious.

Qr libary is lazy loading by default,you can change the default CDN path via Global Configuration. By default: https://cdn.jsdelivr.net/npm/qrious/dist/qrious.min.js. Or install dependence via npm i --save qrious, and import script path in angular.json.

Use local path

// angular.json
{
  "glob": "**/qrious.min.js",
  "input": "./node_modules/qrious/dist",
  "output": "assets/qrious/"
}
// global-config.module.ts
const alainConfig: AlainConfig = {
  qr: {
    lib: '/assets/qrious/qrious.min.js'
  }
};

Examples

url

Basic Usage

Simplest of usage.

expand codeexpand code
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'components-qr-basic',
  template: `
    <h3>{{ type }}</h3>
    <qr [value]="value"></qr>
    <div>
      <button *ngFor="let t of types" nz-button (click)="change(t)">{{ t }}</button>
    </div>
  `,
})
export class ComponentsQrBasicComponent implements OnInit {
  types = ['url', 'email', 'tel', 'cn', 'vcard'];
  value = '';
  type = '';
  change(type: string): void {
    this.type = type;
    switch (type) {
      case 'url':
        this.value = 'https://ng-alain.com/';
        break;
      case 'email':
        this.value = 'mailto:cipchk@qq.com';
        break;
      case 'tel':
        this.value = 'tel:15900000000';
        break;
      case 'cn':
        this.value = '你好🇨🇳';
        break;
      case 'vcard':
        this.value = `BEGIN:VCARD
VERSION:4.0
N:色;卡;;Mr.;
FN:卡色
ORG:NG-ALAIN
TITLE:NG-ALAIN
PHOTO;MEDIATYPE=image/svg:https://ng-alain.com/assets/img/logo-color.svg
TEL;TYPE=work,voice;VALUE=uri:tel:15900000000
ADR;TYPE=WORK;PREF=1;LABEL="中国上海":;;上海;中国
EMAIL:cipchk@qq.com
x-qq:94458893
END:VCARD`;
        break;
    }
  }

  ngOnInit(): void {
    this.change('url');
  }
}
L
image/png
px
px
Designer

Get QR code (dataURL value) via change.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'components-qr-design',
  template: `
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="8" class="text-center">
        <qr
          [value]="value"
          [background]="background"
          [backgroundAlpha]="backgroundAlpha"
          [foreground]="foreground"
          [foregroundAlpha]="foregroundAlpha"
          [level]="level"
          [mime]="mime"
          [padding]="padding"
          [size]="size"
          (change)="change($event)"
          style="border:1px solid #999"
        ></qr>
      </div>
      <div nz-col [nzSpan]="16">
        <se-container col="1">
          <se label="背景">
            <nz-input-group>
              <div nz-row [nzGutter]="8">
                <div nz-col nzSpan="12">
                  <input nz-input type="color" [(ngModel)]="background" [ngModelOptions]="{ standalone: true }" />
                </div>
                <div nz-col nzSpan="12">
                  <nz-input-number
                    [(ngModel)]="backgroundAlpha"
                    [nzMin]="0"
                    [nzMax]="1"
                    [nzStep]="0.1"
                    [ngModelOptions]="{ standalone: true }"
                  ></nz-input-number>
                </div>
              </div>
            </nz-input-group>
          </se>
          <se label="前景">
            <nz-input-group>
              <div nz-row [nzGutter]="8">
                <div nz-col nzSpan="12">
                  <input nz-input type="color" [(ngModel)]="foreground" [ngModelOptions]="{ standalone: true }" />
                </div>
                <div nz-col nzSpan="12">
                  <nz-input-number
                    [(ngModel)]="foregroundAlpha"
                    [nzMin]="0"
                    [nzMax]="1"
                    [nzStep]="0.1"
                    [ngModelOptions]="{ standalone: true }"
                  ></nz-input-number>
                </div>
              </div>
            </nz-input-group>
          </se>
          <se label="误差">
            <nz-select [(ngModel)]="level" [ngModelOptions]="{ standalone: true }">
              <nz-option nzValue="L" nzLabel="L"></nz-option>
              <nz-option nzValue="M" nzLabel="M"></nz-option>
              <nz-option nzValue="Q" nzLabel="Q"></nz-option>
              <nz-option nzValue="H" nzLabel="H"></nz-option>
            </nz-select>
          </se>
          <se label="Mime">
            <nz-select [(ngModel)]="mime" [ngModelOptions]="{ standalone: true }">
              <nz-option nzValue="image/png" nzLabel="image/png"></nz-option>
              <nz-option nzValue="image/jpeg" nzLabel="image/jpeg"></nz-option>
              <nz-option nzValue="image/gif" nzLabel="image/gif"></nz-option>
            </nz-select>
          </se>
          <se label="内边距">
            <nz-input-number [(ngModel)]="padding" [ngModelOptions]="{ standalone: true }" [nzMin]="0" [nzMax]="100"></nz-input-number> px
          </se>
          <se label="大小">
            <nz-input-number
              [(ngModel)]="size"
              [ngModelOptions]="{ standalone: true }"
              [nzMin]="100"
              [nzMax]="1000"
              [nzStep]="padding"
            ></nz-input-number>
            px
          </se>
        </se-container>
      </div>
    </div>
  `,
})
export class ComponentsQrDesignComponent {
  value = 'https://ng-alain.com/';
  background = '#ffffff';
  backgroundAlpha = 1.0;
  foreground = '#000000';
  foregroundAlpha = 1.0;
  level = 'L';
  mime = 'image/png';
  padding = 10;
  size = 220;

  change(dataURL: string): void {
    console.log(dataURL);
  }
}

API

qr

PropertyDescriptionTypeDefaultGlobal Config
[value]Value encoded within the QR codestring | () => string-
[background]Background colour of the QR codestringwhite
[backgroundAlpha]Background alpha of the QR codenumber1
[foreground]Foreground colour of the QR codestringwhite
[foregroundAlpha]Foreground alpha of the QR codenumber1
[level]Error correction level of the QR code'L','M','Q','H''L'
[mime]MIME type used to render the image for the QR codestringimage/png
[padding]Padding for the QR code (pixels)number10
[size]Size of the QR code (pixels)number220
[delay]Delayed rendering, unit: msnumber0
(change)change eventEventEmitter<string>-

FAQ

Refer to #100.

Why not center

Please refer to #111 for the reason. The solution is to set padding to null, for example:

<qr [value]="value" [padding]="null"></qr>