⚡ Ionic Angular QR Bar Code Reader

• App created using the Ionic framework to use the Angular component ngx-qrcode2: Quick Response bar code reader.
• Another great tutorial from Simon Grimm
• code updated to the latest QR bar code scanner version.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Ionic Angular QR Bar Code Reader
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Generates QR bar codes from input text (a web address in this case) as the text is typed.
• Note: ngx-qrcode2 has been deprecated. @techiediaries/ngx-qrcode should be used instead.

📷 Screenshots

📶 Technologies

• Ionic v6

• Angular v13

• Ionic/angular v6

• Angular bar code reader component library ngx-qrcode2 v9

• Angular Reactive Extensions for JS, rxjs async function used to show a user message toast upon successful scan save operation (or error message if not).

• Cordova Plugin: base64-to-gallery to save base 64 data as a device png image

• Ionic Plugin: native bar code scanner opens the camera view and scans a bar code automatically with data returned

💾 Setup

• Run npm i to install dependencies
• To start the server on localhost://8100 type: 'ionic serve'

💻 Code Examples

• function to download bar code data.

 downloadQR() {
    const canvas = document.querySelector('canvas') as HTMLCanvasElement;
    const imageData = canvas.toDataURL('image/jpeg').toString();
    console.log('data: ', imageData);

    let data = imageData.split(',')[1];

    this.base64ToGallery.base64ToGallery(data,
      { prefix: '_img', mediaScanner: true })
      .then(async res => {
        let toast = await this.toastCtrl.create({
          header: 'QR code saved to Photolibrary'
        });
        toast.present();
    }, err => console.log('err: ', err))
  };

🆒 Features

• Uses phone camera to scan a bar code.
• saves bar code images to phone photo library.

📋 Status & To-do list

• Status: Compiles in browser but needs to be tested on a mobile simulator
• To-do: Test in Android Studio

👏 Inspiration

• Project inspired by Simon Grimm´s Youtube video: How to Read and Create QR Codes with Ionic 4
• Github repo: @techiediaries/ngx-qrcode
• Techiediaries: Tutorial: Create a QR Code Generator with Angular 4+

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]