I have run into a problem, I am building a QR sign-in system for a gym. I am using firebase to host the database, ionic for the application and base64 for generating the image. The image itself generates to console.log with URL address and when opened we can retrieve the QR code. What I am struggling to do is how to save this image to the database for each member. I have tried multiple methods online and cant get them to work. I’m new to this and would greatly appreciate any help. Hopely this is clear and any further explanation needed I will provide.
import { Component, Input } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
//page
import { StudentsPage } from '../students/students';
import { Student } from '../../model/student';
import { StudentService } from '../../service/student.service';
declare var require: any;
let QRCode = require('qrcode');
@Component({
selector: 'page-newstudent',
templateUrl: 'newstudent.html'
})
export class NewStudentPage {
@Input('qrc-value') value = 'https://www.techiediaries.com';
@Input('qrc-version') version : '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '13' | '14' | '15' | '16' | '17' | '18' | '19' | '20' | '21' | '22' | '23' | '24' | '25' | '26' | '27' | '28' | '29' | '30' | '31' | '32' | '33' | '34' | '35' | '36' | '37' | '38' | '39'|'40' | '' = '';
@Input('qrc-errorCorrectionLevel') errorCorrectionLevel : 'L' | 'M' | 'Q' | 'H' = 'M';
student: Student = new Student();
error: string;
constructor(public navCtrl: NavController, public storage: Storage, private studentService: StudentService) {
}
addstudent() {
this.storage.get('user_id').then((val) => {
// this.user=db.list('User').valueChanges();
// console.log("user id: ",val)
if (val != null) {
this.student.add_date = new Date().toDateString();
this.student.user_id = val;
console.log(this.student);
this.toDataURL().then((v : string)=>{
var base64parts = v.split(',');
base64parts[0] = "base64:Qrcode.png//";
var imagedata = base64parts.join("");
this.student.qr_code = imagedata;
this.value=this.studentService.pushQR(this.student)
this.navCtrl.setRoot(StudentsPage);
}).catch((e)=>{
console.error(e);
})
}
}
)}
toDataURL(){
return new Promise((resolve,reject)=>{
QRCode.toDataURL(this.value, { version : this.version , errorCorrectionLevel : this.errorCorrectionLevel } ,function (err, url) {
if(err){
console.error(err);
reject(err);
}
else{
console.log(url);
resolve(url);
}
})
});
}
}
Student-Service.ts This is wrong, it generates random code to database
pushQR(data:Student):string{
console.log("Student Service: Add new student information");
var aRef = this.db.list('Students').push(null);
console.log(aRef.key);
data.qr_code=aRef.key;
aRef.set(data);
return aRef.key
}
pushQRimage(data:Student):string{
console.log("Student Service: Add new student information");
var aRef = this.db.list('Students').push(data.urlqr);
console.log(data.urlqr);
data.urlqr=aRef.key;
aRef.set(data);
return aRef.key
}