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

$ 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

Leave a Comment

Your email address will not be published. Required fields are marked *