安装
使用您喜欢的包管理器安装流行的 JavaScript 二维码库。
npm
npm install qrcodeyarn
yarn add qrcodenpm (styled)
npm install qr-code-styling使用 JavaScript 库生成二维码
以下是使用流行的 JavaScript 二维码库在项目中生成二维码的代码示例。
Basic QR Code (Node.js)
const QRCode = require('qrcode')
// Generate QR code as data URL
const dataUrl = await QRCode.toDataURL('https://qrcode.fun')
console.log(dataUrl)
// Generate QR code as file
await QRCode.toFile('./qrcode.png', 'https://qrcode.fun', {
width: 300,
margin: 2,
color: {
dark: '#1A2B3C',
light: '#FFFFFF'
}
})Browser Canvas Rendering
import QRCode from 'qrcode'
const canvas = document.getElementById('canvas')
await QRCode.toCanvas(canvas, 'https://qrcode.fun', {
width: 256,
margin: 2,
color: {
dark: '#1A2B3C',
light: '#FFFFFF'
}
})Styled QR Code with Logo
import QRCodeStyling from 'qr-code-styling'
const qrCode = new QRCodeStyling({
width: 300,
height: 300,
data: 'https://qrcode.fun',
image: '/logo.png',
dotsOptions: {
color: '#1A2B3C',
type: 'rounded'
},
cornersSquareOptions: {
color: '#8564C3',
type: 'extra-rounded'
},
backgroundOptions: {
color: '#FFFFFF'
}
})
qrCode.append(document.getElementById('qr-container'))
qrCode.download({ extension: 'png' })QRCode.fun API
通过 API 在 JavaScript 中生成二维码
使用 QRCode.fun API 从您的 JavaScript 应用程序生成带有自定义颜色、形状和徽标的样式化二维码。
JavaScript API 集成
// Using fetch (Browser or Node.js 18+)
const response = await fetch('https://qrcode.fun/api/generate-qr-styled', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
data: 'https://qrcode.fun',
width: 300,
height: 300,
type: 'png',
margin: 10,
dotsOptions: {
color: '#1A2B3C',
type: 'rounded'
},
cornersSquareOptions: {
color: '#8564C3',
type: 'extra-rounded'
},
backgroundOptions: {
color: '#FFFFFF'
}
})
})
const result = await response.json()
// result.data contains the base64 PNG data URL
console.log(result.data)实时二维码预览
立即尝试使用 JavaScript 生成二维码。
二维码预览
原生库 vs API
比较直接使用 JavaScript 二维码库与 QRCode.fun API。
| 功能 | 原生库 | QRCode.fun API |
|---|---|---|
| 设置复杂度 | 安装包、配置打包工具 | 单次 HTTP 请求 |
| 自定义 | 因库而异 | 完整样式：颜色、形状、徽标 |
| 离线支持 | 是 | 需要互联网 |
| 维护 | 手动更新依赖 | 始终保持最新 |
| 输出格式 | PNG, SVG（取决于库） | PNG, SVG |
JavaScript 二维码使用场景
JavaScript 开发者生成二维码的常见场景。
Web 应用程序
在 React、Vue、Angular 或原生 JS Web 应用中动态生成二维码，用于分享链接、支付或身份验证。
Node.js 后端
在服务端创建二维码，用于发票、票据、物流标签和自动邮件附件。
渐进式 Web 应用
为 PWA 添加二维码生成功能，实现支持离线的移动体验和可扫描的二维码。
浏览器扩展
构建 Chrome 或 Firefox 扩展，为当前页面网址或选中文本生成二维码。
常见问题
关于使用 JavaScript 生成二维码的常见问题。
最流行的两个选择是 qrcode（轻量级，适合简单二维码）和 qr-code-styling（高级自定义，支持颜色、形状和徽标）。选择 qrcode 追求简洁，选择 qr-code-styling 追求设计灵活性。