qrcode.js 顶部加文字
时间: 2023-11-24 13:05:23 浏览: 27
要在 qrcode.js 中生成带文字的二维码,可以使用 canvas 绘图来实现。具体步骤如下:
1. 使用 qrcode.js 生成 QR Code。
2. 创建一个新的 canvas 元素。
3. 使用 canvas 绘图,在顶部添加文字。
4. 将 canvas 转换为图片进行保存。
下面是示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>QR Code with Text</title>
<script src="qrcode.min.js"></script>
</head>
<body>
<canvas id="qrcode"></canvas>
<script>
// 生成 QR Code
let qrcode = new QRCode(document.getElementById('qrcode'), {
text: 'https://www.example.com',
width: 200,
height: 200,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
// 添加文字
let canvas = document.getElementById('qrcode')
let ctx = canvas.getContext('2d')
ctx.font = '16px Arial'
ctx.fillText('Your Text Here', 0, 16)
// 保存图片
let img = canvas.toDataURL('image/png')
let link = document.createElement('a')
link.download = 'qrcode_with_text.png'
link.href = img
link.click()
</script>
</body>
</html>
```
在代码中,我们首先引入了 qrcode.min.js 库,并使用 QRCode() 函数生成 QR Code。然后,我们创建一个新的 canvas 元素,并使用 getContext('2d') 获取绘图上下文,使用 fillText() 方法在顶部添加文字。最后,我们将 canvas 转换为图片并进行保存。
注意:canvas 绘图的坐标系原点在左上角,使用 fillText() 方法时,y 坐标表示文字的基线位置,而不是顶部位置。