如何使用 angular 保存生成的二维码图像 5

Question

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

我正在制作一个网站，用户可以生成二维码。每当生成二维码时，我都想将此图像保存到文件中并将图像名称放入数据库中。但是我不知道如何保存和下载它。

Answer 1

看起来 angular2-qrcode 有一个 'canvas' 参数导致它绘制到 canvas。

如果你能让它工作，那么你应该能够使用 Capture HTML Canvas as gif/jpg/png/pdf? 中解释的技术从 canvas.

中获取图像

Answer 2

不过我已经想出我的 question.i 的解决方案已经尝试了不同的 methods.none 似乎 work.i 将在下面列出步骤。

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');

要将 base 64 转换为多部分图像文件，我遵循以下几行。我设置的图片名称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});

}

最后我将文件发送到 formdata formate 休息 API。

Formdata.append("imagefile",file);

如何使用 angular 保存生成的二维码图像 5

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

qr-code

typescript

angular