ngx-kjua

ngx-kjua

Angular QR-Code generator component.

This is basically an Angular-wrapper for kjua by Lars Jung.

Demo

StackBlitz (preview needs to be opened in new window)

Installation

To install this package, run:

npm install ngx-kjua --save

Then import it into your Angular AppModule:

// Common imports
import { NgModule /* , ... */ } from '@angular/core';

// Import the package's module
import { NgxKjuaModule } from 'ngx-kjua';

@NgModule({
    declarations: [ /* AppComponent ... */ ],
    imports: [
    
        // BrowserModule, 
        // ...
        
        NgxKjuaModule,
        
        // another imports...
    ],
    // ...
})
export class AppModule { }

Usage

Once the package is imported, you can use it in your Angular application:

  <ngx-kjua
    [text]="'hello'"
    [renderAsync]="false"
    [render]="'image'"
    [crisp]="true"
    [minVersion]="1"
    [ecLevel]="'H'"
    [size]="400"
    [ratio]="undefined"
    [fill]="'#333'"
    [back]="'#fff'"
    [rounded]="100"
    [quiet]="1"
    [mode]="'plain'"
    [mSize]="30"
    [mPosX]="50"
    [mPosY]="50"
    [label]="'label text'"
    [fontname]="'sans-serif'"
    [fontcolor]="'#ff9818'"
    [image]="undefined"
  ></ngx-kjua>

• text encoded content (defaults to ``)
• renderAsync weather or not rendering is done inside "requestAnimationFrame"-call (defaults to false, use true if you want to generate more than one code (e.g. batch))
• render render pixel-perfect lines (defaults to true)
• minVersion minimum version: 1..40(defaults to 1)
• ecLevel error correction level: 'L', 'M', 'Q' or 'H' (defaults to L)
• size size in pixel (defaults to 200)
• fill code color (defaults to #333)
• back background color (defaults to #fff)
• rounded roundend corners in pc: 0..100 (defaults to 0)
• quiet quiet zone in modules (defaults to 0)
• mode modes: 'plain', 'label' or 'image' (defaults to plain, set label or image property if you change this)
• mSize label/image size in pc: 0..100 (defaults to 30)
• mPosX label/image pos x in pc: 0..100 (defaults to 50)
• mPosY label/image pos y in pc: 0..100 (defaults to 50)
• label additional label text (defaults to ``)
• fontname font for additional label text (defaults to sans-serif)
• fontcolor font-color for additional label text (defaults to #333)
• image additional image (defaults to undefined, use an HTMLImageElement)

More details can be found on larsjung.de/kjua

TODO

• Add an example for renderAsync where lots of codes are generated