cnpm install qrcode@1.2.0 --save
import QRCode from "qrcode"; //引入生成二维码插件
this.getQRCode(item)
getQRCode(item) {
const _size = 500
let opts = {
errorCorrectionLevel: "H",//容错级别,指二维码被遮挡可以扫出结果的区域比例
type: "image/png",//生成的二维码类型
quality: 0.3,//二维码质量
margin: 3,//二维码留白边距
width: _size,//宽
height: _size,//高
text: "名字",//二维码内容
color: {
light: "#ffffff"//背景色
}
};
let that = this
// 将获取到的数据(val)画到msg(canvas)上,加上时间戳动态生成二维码
QRCode.toCanvas(this.$refs.canvas, 'https://www.baidu.com', opts, function (error) { // 登录链接
if (error) {
this.$message.error('二维码生成失败')
return
}
console.log('生成成功')
const qrText = item.realName
const size = _size
const fontWeight='bold' // 字体 粗体 格式
const fontSize = 16 // 字体大小
const tb = 12 // 底部文字上下间距
const realHeight = size + fontSize + 2*tb //实际高度
// 画布上下文对象
const ctx = that.$refs.canvas.getContext("2d");
// 获取二维码数据
const data = ctx.getImageData(0, 0, size, size);
ctx.fillStyle = "#ffffff"
that.$refs.canvas.setAttribute('height', realHeight); // 重设画布像素高度
that.$refs.canvas.style.setProperty('height', realHeight + 'px'); // 重设画布实际高度
ctx.fillRect(0, 0, size, realHeight)
ctx.putImageData(data, 0, 0)// 填充二维码数据
ctx.font = `${fontWeight} ${fontSize}px Arial`;
const textWidth = ctx.measureText(qrText).width; //文字真实宽度
const ftop = size + tb; //文字距顶部位置
const fleft = (size - textWidth) / 2; //根据字体大小计算文字left
const textPadding = fontSize / 2; //字体边距为字体大小的一半可以自己设置
// 设置底部背景色
ctx.fillStyle = "#eaeaea";
ctx.fillRect(0, size, size, realHeight - 2*tb);
// 设置字体填充位置
ctx.fillRect(
fleft - textPadding / 2,
ftop - textPadding / 2,
textWidth + textPadding,
fontSize + textPadding
);
ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
ctx.fillStyle = "#333";// 字体颜色
ctx.fillText(qrText, fleft, ftop)
//下载二维码
let base64Img = that.$refs.canvas.toDataURL('image/jpg');
//创建下载标签,然后设置链接和图片名称
let a = document.createElement('a')
a.href = base64Img
a.download = item.realName + ' - 二维码'+Date.now()
a.click()
//销毁元素
a.remove()
});
},