Question

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

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

Answer 1

像angular2-qrcode一样，有一个“画布”参数使它绘制到画布上。

如果您可以使用它，那么您应该能够使用Capture HTML Canvas as gif/jpg/png/pdf?中介绍的技术从画布上获取图像。

Answer 2

但是我想出了解决问题的方法。我尝试了不同的方法。它们似乎都不起作用。我将在下面列出步骤。

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转换为Multipart图像文件。我设置了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保存生成的QR代码图像

2 个答案: