vue使用qrcode生成二维码,并在二维码下面添加文字描述
vue使用qrcode生成二维码,并在二维码下面添加文字描述
·
1、最终效果
2、代码
// url 二维码内容链接 size 二维码大小(高宽) qrText 底部描述文字 color 二维码颜色
const initCanvas = async (url, size, qrText,color = '#000') => {
const canvas = await QRCode.toCanvas(url, {
errorCorrectionLevel: 'H',
margin: 1, // 设置padding 二维码的padding
height: size,
width: size,
scal: 177,
color: {dark: color},
rendererOpts: {quality: 0.9}
})
const fontWeight='bold' // 字体 粗体 格式
const fontSize = 14 // 字体大小
const tb = 5 // 底部文字上下间距
const realHeight = size + fontSize + 2*tb //实际高度
// 画布上下文对象
const ctx = canvas.getContext("2d");
// 获取二维码数据
const data = ctx.getImageData(0, 0, size, size);
ctx.fillStyle = "#fff"
canvas.setAttribute('height', realHeight); // 重设画布像素高度
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 = "#fff";
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);
console.log(canvas.toDataURL())
return canvas
}
我这是vue3测试,vue2可以在method 中定义 函数,还有就是在文件中引入qrcode
import QRCode from 'qrcode'
methods: {
initCanvas(url, size,qrText, color = '#000') {
代码内容......
},
}
更多推荐
已为社区贡献4条内容
所有评论(0)