二维码在线生成器
是什么：将文本/链接等信息快速生成二维码图片的网页工具。
为什么：方便用户创建个性化二维码，用于分享链接、联系方式、支付码等。
特点：
- 即时生成，无需安装软件
- 支持自定义颜色和尺寸
- 可下载为图片文件
核心功能代码 (HTML + JavaScript)
html
<!DOCTYPE html>
<html>
<head>
<title>二维码生成器</title>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<style>
.container { max-width: 500px; margin: 50px auto; padding: 20px; }
.input-group { margin: 15px 0; }
input, button, select { width: 100%; padding: 10px; margin: 5px 0; }
#qrcode { margin: 20px auto; text-align: center; }
.color-picker { display: flex; gap: 10px; }
</style>
</head>
<body>
<div class="container">
<h2>二维码生成器</h2>
<div class="input-group">
<input type="text" id="textInput" placeholder="输入文本或网址..." value="https://example.com">
</div>
<div class="input-group">
<label>尺寸:</label>
<select id="sizeSelect">
<option value="128">128x128</option>
<option value="256" selected>256x256</option>
<option value="512">512x512</option>
</select>
</div>
<div class="input-group color-picker">
<div>
<label>前景色:</label>
<input type="color" id="foregroundColor" value="#000000">
</div>
<div>
<label>背景色:</label>
<input type="color" id="backgroundColor" value="#ffffff">
</div>
</div>
<button onclick="generateQRCode()">生成二维码</button>
<div id="qrcode"></div>
<button onclick="downloadQRCode()" id="downloadBtn" style="display:none;">下载二维码</button>
</div>
<script>
function generateQRCode() {
const text = document.getElementById('textInput').value;
const size = document.getElementById('sizeSelect').value;
const fgColor = document.getElementById('foregroundColor').value;
const bgColor = document.getElementById('backgroundColor').value;
if (!text) {
alert('请输入内容');
return;
}
// 清空之前的内容
document.getElementById('qrcode').innerHTML = '';
// 生成二维码
QRCode.toCanvas(document.getElementById('qrcode'), text, {
width: parseInt(size),
color: {
dark: fgColor,
light: bgColor
}
}, function(error) {
if (error) console.error(error);
document.getElementById('downloadBtn').style.display = 'block';
});
}
function downloadQRCode() {
const canvas = document.querySelector('#qrcode canvas');
const link = document.createElement('a');
link.download = 'qrcode.png';
link.href = canvas.toDataURL('image/png');
link.click();
}
// 页面加载时自动生成
window.onload = generateQRCode;
</script>
</body>
</html>
主要功能
- 文本转二维码 - 支持网址、文本、联系方式等
- 自定义尺寸 - 128px 到 512px
- 颜色定制 - 前景色和背景色
- 一键下载 - PNG 格式图片
技术要点
- 使用 qrcode.js 库生成二维码
- Canvas 实时渲染
- Color Input 颜色选择器
- Data URL 实现图片下载
一句话总结：二维码在线生成器让用户无需编程就能快速创建个性化二维码，适用于营销、支付、信息分享等多种场景。