How can i save generated QR-Code image using angular 5

Question

<qrcode [qrdata]="'Your QR code data string'" [size]="256" [level]="'M'" ></qrcode>

I am making a website were users can generate a qrcode. Whenever a qrcode is generated I want to save this image to a file and put the imagename in a database. But I have no idea how I can save and download this.

Answer 1

Looks like angular2-qrcode has a 'canvas' paramter that causes it to draw to a canvas.

If you can get that to work, then you should be able to use the technique explained at Capture HTML Canvas as gif/jpg/png/pdf? to get an image from the canvas.

Answer 2

However i have figured the solution for my question.i have tried different methods.none of them seems to work.i will listout steps below.

let dataurl = document.getElementById("canvas").innerHTML; 
// data get from html as base 64 image

let myRegexp = /(?:^|\s)src=(.*?)(?:\s|$)/g;

let match = myRegexp.exec(dataurl);

let match1 = match[1].replace('">', '');

let ImageURL = match1;

let block = ImageURL.split(";");

let contentType = block[0].split(":")[1];

let realData = block[1].split(",")[1];

let **file** = this.**dataURLtoFile**(ImageURL, 'testFile.png');

To convert base 64 to Multipart image file i followed below lines. image name i set testfile.png

dataURLtoFile(dataurl, filename) {

 var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],

 bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);

 while(n--) {

  u8arr[n] = bstr.charCodeAt(n);

 }

 return new File([u8arr], filename, {type:mime});

}

finally i sent file to formdata formate to rest API.

Formdata.append("imagefile",file);