How display a Customised QR Code in your Ionic App

This tutorial will create a customised QR code with a personalised logo and colour scheme, which can then be displayed in your app.

1. Set Up QRCode

• Install the qrcode node package
• Create a directive to generate the QR code

$ npm install --save qrcode
$ ionic generate directive qr-code

• In app.module.ts, import the newly created QrCodeDirective and add it to the declarations

import { QrCodeDirective } from '../directives/qr-code';

2. Create the QR Code

• Import QRCode in to the directive

import * as QRCode from 'qrcode';

• Define an input that will be used to give a value to the QR code

@Input('qrValue') value: string;

• Define the options for the QRCode, including colour and error correction level

options= {
  errorCorrectionLevel:'Q',
  margin:0,
  scale:20,
  color: {
    dark:'#651296'
  }
};

• Add the element reference to the constructor

constructor(public element: ElementRef) { }

• Implement the ngOnInit() function to do the following:
  • Create a canvas element to draw the QR code on
  • Use QRCode to draw the QR code on the canvas with the input and defined options
  • Load an image to display on the QR code, stored in ‘assets/img/qr_logo.png’
  • Draw the image on the canvas, sizing it appropriately and placing it in the centre
  • Set the src of the image element to be the data of the canvas

ngOnInit() {
  let canvas = document.createElement('canvas');
  QRCode.toDataURL(canvas, this.value, this.options, (err, url) => {
    this.element.nativeElement.src = canvas.toDataURL('image/png');
    let context = canvas.getContext('2d');
    let size = canvas.width / 2.5;
    let pos = (canvas.width - size) / 2;
    let img = new Image();
    img.onload = () => {
      context.drawImage(img, pos, pos, size, size);
      this.element.nativeElement.src = canvas.toDataURL('image/png');
    }
    img.src = 'assets/img/qr_logo.png';
  });
}

3. Display the QR code

• Add an image to your app
• Apply the directive by adding the qr-code attribute
• Define a value for the QR code by setting the qrValye attribute

<img qr-code qrValue="softwarb">

• You can use property binding or string interpolation to control the value of the QR code

<img qr-code [qrValue]="qrCodeValue">
<img qr-code qrValue="{{ qrCodeValue }}">

4. Alternative

I prefer to use an image element to hold the QR image, but a canvas can also be used. Both have their advantages:

• img: Easier to manipulate the an image with css and simple to download
• canvas: less complex to draw and therefore quicker to render the QR image

The only change to be able to apply the directive to a canvas element is in the ngOnInit() function

• Implement the ngOnInit() function to do the following:
  • Use QRCode to draw the QR code on the canvas with the input and defined options
  • Load an image to display on the QR code, stored in ‘assets/img/qr_logo.png’
  • Draw the image on the canvas, sizing it appropriately and placing it in the centre

ngOnInit() 
  QRCode.toDataURL(this.element.nativeElement, this.value, this.options, (err, url) => {
    let canvas = this.element.nativeElement;
    let context = canvas.getContext('2d');
    let size = canvas.width / 2.5;
    let pos = (canvas.width - size) / 2;
    let img = new Image();
    img.onload = () => {
      context.drawImage(img, pos, pos, size, size);
    }
    img.src = 'assets/img/qr_logo.png';
  });
}

The directive can then be applied to the canvas in the same way

<canvas qr-code qrValue="softwarb"></canvas>
<canvas qr-code [qrValue]="qrCodeValue"></canvas>
<canvas qr-code qrValue="{{ qrCodeValue }}"></canvas>

 5. One Directive for Img and Canvas

• The ngOnInit() function for the img becomes drawOnImage()
• The ngOnInit() function for the canvas becomes drawOnCanvas()
• Create a new ngOnInit() function that checks the element tag name and calls the corresponding function

ngOnInit() {
  switch (this.element.nativeElement.localName) {
    case 'img':
      this.drawOnImg();
      return;
    case 'canvas':
      this.drawOnCanvas();
      return;
    default:
      return;
  }
}

6 Result

You will be able to display a custom QR code within you app. The logo and colour can both easily be changed to match the style of your app.

Related: How to implement a QR Scanner in Ionic