一、生成二维码
生成二维码是基于第三方库qrcode-generator的，我们可以通过npm安装该库：
npm install qrcode-generator --save
我们新建一个qrcode.js，引入下载的库：
import QRCode from 'qrcode-generator';
我们可以封装一个生成二维码的方法：
generateQRCode(text) {
let typeNumber = 4;
let errorCorrectionLevel = 'L';
let qr = QRCode(typeNumber, errorCorrectionLevel);
qr.addData(text);
qr.make();
return qr.createImgTag();
}
该方法传入一个文本参数，使用qrcode-generator创建二维码，将参数text添加到二维码中，最后返回一个img标签的字符串，该字符串可以直接插入到HTML中显示：
this.qrcodeImg = this.generateQRCode('http://www.example.com');
在HTML中展示二维码：
二、保存图片
我们可以使用HTML5的canvas将二维码转换为图像，然后通过下载链接的形式保存图片。首先定义一个canvas元素：
我们将二维码生成在画布上，获取画布的数据，并创建一个链接用于下载。canvas绘制图形是异步的，因此我们使用Promise进行处理：
saveQRCode() {
let canvas = this.$refs.canvas;
let img = new Image();
img.src = this.qrcodeImg;
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0,img.width,img.height);
canvas.toBlob(function(blob) {
let url = URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = 'QRCode.png';
a.click();
window.URL.revokeObjectURL(url);
});
}
}
我们定义一个方法saveQRCode，该方法将canvas元素设置为和图像一样的大小，并在canvas上绘制图像。然后将画布数据转换为blob对象，创建下载链接，设置下载名称为QRCode.png，触发点击事件，最后撤销创建的URL。
三、完整代码示例
qrcode.vue：
原创文章，作者：UPMAP，如若转载，请注明出处：https://www.506064.com/n/372036.html
微信扫一扫 
支付宝扫一扫 