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.

Do you have a working sample? I have done what is written here, but the Qr code is not show.
No, I did this as part of a larger project that was not open source. Check the console for errors.
Hello,
I followed code you provide here but it throws an error as follow:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can’t bind to ‘qrValue’ since it isn’t a known property of ‘canvas’. (”
]qrValue=”{{ qrCodeValue }}”>
“):
Check these 3 things
You have imported
QrCodeDirective
You are using
qr-code
on the canvas elementSpelling of
qrValue
&qr-code
is the same in the directive and when used on the element