在
Vue 中
生成二维码，
并根据**文字长度动态调整中心区域大小**，可以实现更美观、更智能的
二维码展示效果。这种方式特别适用于不同长度的品牌名称、活动标语等需要嵌入
二维码中心的场景。
---
### ✅ 实现目标
- 使用 `
qrcode`
生成二维码
- 根据输入文字长度动态计算中心区域宽度
- 自动调整字体大小，使文字适应中心区域
- 保证
二维码可扫描性（不破坏
二维码关键区域）
---
### 📦 安装依赖
```bash
npm install
qrcode
```
---
### 🧩
Vue 实现代码
```html
<template>
<div class="qr-container">
<h2>动态调整中心区域的
二维码</h2>
<input v-model="qrContent" placeholder="输入
二维码内容" />
<input v-model="centerText" placeholder="输入中心文字" />
<button @click="generate
QRCode">
生成二维码</button>
<canvas ref="qrCanvas" width="300" height="300"></canvas>
</div>
</template>
<script>
import
QRCode from '
qrcode';
export default {
data() {
return {
qrContent: 'https://www
.example
.com',
centerText: '
Vue QR',
};
},
methods: {
async generate
QRCode() {
const canvas = this
.$refs
.qrCanvas;
const ctx = canvas
.getContext('2d');
// 清空画布
ctx
.clearRect(0, 0, canvas
.width, canvas
.height);
//
生成基础
二维码
await
QRCode.toCanvas(canvas, this
.qrContent, {
width: 300,
color: { dark: '#000000', light: '#FFFFFF' },
});
// 设置字体基础参数
const baseFontSize = 20;
ctx
.font = `${baseFontSize}px Arial`;
const textWidth = ctx
.measureText(this
.centerText)
.width;
// 动态计算中心区域大小
const padding = 20;
const centerWidth = textWidth + padding * 2;
const centerHeight = baseFontSize + padding * 1
.5;
const centerX = canvas
.width / 2 - centerWidth / 2;
const centerY = canvas
.height / 2 - centerHeight / 2;
// 绘制白色
背景
ctx
.fillStyle = '#FFFFFF';
ctx
.fillRect(centerX, centerY, centerWidth, centerHeight);
// 动态调整字体大小
let fontSize = baseFontSize;
ctx
.font = `${fontSize}px Arial`;
let measuredWidth = ctx
.measureText(this
.centerText)
.width;
// 如果文字超出区域，逐步缩小字体
while (measuredWidth > centerWidth - padding * 2 && fontSize > 6) {
fontSize--;
ctx
.font = `${fontSize}px Arial`;
measuredWidth = ctx
.measureText(this
.centerText)
.width;
}
// 设置文字样式
ctx
.fillStyle = '#000000';
ctx
.textAlign = 'center';
ctx
.textBaseline = 'middle';
// 绘制文字
ctx
.fillText(
this
.centerText,
canvas
.width / 2,
canvas
.height / 2
);
// 可选：绘制
边框
ctx
.strokeStyle = '#000000';
ctx
.lineWidth = 1;
ctx
.strokeRect(centerX, centerY, centerWidth, centerHeight);
},
},
};
</script>
<style scoped>
.qr-container {
max-width: 500px;
margin: 0 auto;
font-family: Arial, sans-serif;
}
input {
display: block;
width: 100%;
padding: 8px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 15px;
background-color: #42b983;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
canvas {
margin-top: 20px;
border: 1px solid #ccc;
}
</style>
```
---
### 🔍 代码解释
1
. **
二维码生成**：
- 使用 `
QRCode.toCanvas()`
生成二维码图像，设置为 300x300 像素。
2
. **动态计算中心区域宽度**：
- 使用 `ctx
.measureText()` 测量文字宽度。
- 添加左右 `padding`，计算出中心区域的宽度。
3
. **字体大小自适应**：
- 从默认字体大小开始，逐步减小字体，直到文字宽度不超过中心区域。
4
. **绘制文字与
背景**：
- 使用白色
背景防止文字与
二维码颜色混淆。
- 文字居中显示，增强可读性和美观性。
5
. **
边框绘制（可选）**：
- 增加
二维码中心区域的辨识度。
---
### ✅ 优点
- 支持任意长度文字，自动适配大小。
- 提升用户体验，保证
二维码可扫描性。
- 美观、可定制化，适用于品牌宣传、活动
二维码等场景。
---
###
本文介绍如何在Vue项目中生成一个可下载的二维码，并且这个二维码带有边框和背景颜色，以提高二维码的可识度。
最低0.47元/天 解锁文章
扫一扫
1853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
