- 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
- 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.
-
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
- Run
npm i
to install dependencies - To start the server on localhost://8100 type: 'ionic serve'
- 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))
};
- Uses phone camera to scan a bar code.
- saves bar code images to phone photo library.
- Status: Compiles in browser but needs to be tested on a mobile simulator
- To-do: Test in Android Studio
- 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+
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email: gomezbateman@yahoo.com