npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-kjua

v18.1.3

Published

Angular QR-Code generator component.

Downloads

5,218

Readme

NPM version Downloads PRs Welcome

If you find my work useful you can buy me a coffee, I am very thankful for your support.

ngx-kjua

Angular QR-Code generator component.

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

Breaking changes v16.1.0

Fromm the v16.1.0 this library use the standalone component, and not the module anymore.
See how to implement it

Demo

Demo

StackBlitz

StackBlitz Example for encoding Contacts, Calendar entries, WiFi-settings and more. You can use iPhone's default Camera App, it will decode QR-Codes!

StackBlitz Example with 300 codes at once (async rendering)

StackBlitz Example for generating a PDF with jspdf

Installation

To install this package, run:

npm i ngx-kjua --save

Then import it into your Angular AppModule:

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

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

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

Usage

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

Basic

  <ngx-kjua
    [text]="'hello'"
  ></ngx-kjua>

Advanced

  <ngx-kjua
    [text]="'hello'"
    [renderAsync]="false"
    [render]="'svg'"
    [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"
    [cssClass]="'image-auto'"
  ></ngx-kjua>

Options

:exclamation: Caution: When adding images, label or similar, this will reduce the readability of the QR-code. Consider using a higher error correction level (e.g. L) in those cases.

Crisp

As you can set the size of the image, the amount of 'modules' (black/white boxes that make up the QR-code) is calculated based on the size and the amount of quiet modules. The calculation can result in an odd number so that a module is e.g. 4.5 pixels big. The resulting image will be drawn fuzzy if crisp is set to false. Setting it to true will result in 'sharp' lines.

crisp false

crisp true

Label

Kjua lets you embed a text or image to the code. This can be set with the setting mode. This can reduce the readability of the code!

Image

Image as Code

Clear + Image

This mode let's you "cut out" parts of the QR-code and at the same time add an image.

labelimage, imagelabel and clearimage

Use this, if you want a label AND an image. In these modes mSize, mPosX and mPosY can be provided as an array. In mode labelimage, the first value (index 0) of the mSize, mPosX and mPosY arrays is used for the label, the second value (index 1) is used for image and vice versa. Also in labelimage mode, the label is drawn before the image is drawn and therefore kinda "in the background" if the two overlap.

All options

  • text encoded content (defaults to ``)
  • render render-mode: 'image', 'canvas', 'svg' (defaults to image)
  • crisp 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, min 24 or higher, depend on how much character you're using)
  • fill code color (defaults to #333)
  • back background color (defaults to #fff, for transparent use '' or null)
  • rounded roundend corners in pc: 0..100 (defaults to 0, not working if renderis set to svg)
  • quiet quiet zone in modules (defaults to 0)
  • mode modes: 'plain', 'label', 'image' or 'clear' (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)
  • fontoutline draw an outline on the label text in the color of the back (defaults to true)
  • image additional image (defaults to undefined, use an HTMLImageElement or base64-string)
  • imageAsCode draw the image as part of the code (defaults to false)
  • 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))
  • cssClass additional css-class that will be appended to the div-container that contains the qr-code (defaults to undefined)

More details can be found on larsjung.de/kjua

Async rendering

If you plan to render more than one barcode (e.g. batch-generation) I recommend using renderAsync-flag. It executes the rendering inside a "requestAnimationFrame"-call.

Encoding Contacts, Calendar entries, WiFi-settings, ...

The component comes with a helper-class (QrCodeHelper), that helps you with generating Codes that have information like a Contact encoded. Currently it supports the generation of:

  • SMS: number with optional pre-defined text
  • Call
  • Geo-Information: a point on the map with Latitude and Longitude
  • Events
  • Email: recipient with an optional subject and text
  • WiFi: SSID with optional password and a flag for hidden WiFis
  • Contact Information: name with optional address, telephone-number(s), email, url.

Contact Encoding is done with MECard-format and NOT VCard! VCard gives a longer string and therefore a bigger code which potentially has a negative impact on readability for scanners. You can, of course, create a VCard string as well but the format is more complex.

Generate PDF

See the example above. It works with pure kjua and has in fact nothing to do with ngx-kjua but I thought somebody might find it useful.