How to Read and Create QR Codes with Ionic [v4]

ionic-4-qr-code-reader

QR Codes are still relevant and a great way to share data easily. With your Ionic 4 app you can not only scan them but also create them as well!

In this quick win we will integrate the ngx-qrcode package to create our own QR codes, and also implement additional functionality so we can actually save QR codes to our photo library!

ionic-4-qr-reader

The QR code scanning functionality and saving the image to the library of course only works on a device, so make sure to deploy it to your iOS or Android device!

Setting up Your QR Code Reader

First of all we get started with a blank new app, then we go ahead by installing the package for creating the codes. Finally we also need two Cordova plugins which we need to scan a code and also to save a base64 string to the image library:

To make use of the plugins we also need to add them to our module, so go ahead and change your app/app.module.ts to:

When you build your app for iOS you you also have to specify some information on why you need access to the camera (for scanning) and the library (to save photos).

To automate this we can change our config.xml and insert the following lines inside the iOS section:

Of course make sure to change it to something that matches why your app really needs the permissions!

Reading a QR Code and generating Codes

Now we can finally get started, but you also need to import the module of the NPM package we installed in the beginning to create a QR Code. Make sure to add this to the module file of your lazy loaded page where you are using it, so in our case change the home/home.module.ts to:

Now we can use the package, but we’ll actually only see it in the view because there are no functions we need to call!

So let’s start by implementing the basic functionality to read or scan a QR code, which is actually done in just a few lines. Besides that we specify some variables:

  • qrData: This will be the data for our generated QRCode, we will also link an input to it
  • scannedCode: This will hold the value once we scan a code
  • elementType: The generated QR code type, can be one of the 3 values

Now go ahead and start the home/home.page.ts with:

Now we need a simple view in which we can set the data for the QR code that will be generated through an input field.

Also, we add a little segment to switch between the generated type of the QR code. For all information what you can supply simple check out the Github page of the package!

Besides that we have some buttons and fields, but there’s really nothing special in here. Only note the usage of the ngx-qrcode: Simply passing in the data will automatically generate a QR Code!

Now change your home/home.page.html to:

Now your app should already show a QR code based on the data of your input field and automatically generate a new code whenever you change the data.

Also, scanning a code (from a device) should work, simply open the serve to generate a code and then test the QR code scan from your device!

Download and Save Canvas Images to the Library

Now our final exercise is to download the create QR code, which was asked many times on the last quick win.

We have multiple ways to achieve this, but the depend on the platform where the app is running and the type of the generated Code. If you pick url or img, the generated DOM element is an tag, but with canvas it’s obviously not an image.

Anyway, in both cases you can access the DOM element and convert the data to a base64 string or simply grab the src of the image. Actually using querySelector is a bit dirty but works fine in this small scenario.

Now you could also save this base64 string as a file inside the folder of your app, but if you want your users to see the image in their very own photo library you need to use the additional base64ToGallery plugin that we installed in the beginning!

Go ahead and add the download function to your home/home.page.ts;

As we make use of a Cordova plugin the download also only works on a real device. For a browser implementation you can also use the bas64 data and download it directly.

Conclusion

Working with QR codes works great with Ionic, it doesn’t matter if you want to read, generate or download them. You just have to use the right tools to get the job done!

You can also find a video version of this Quick Win below.