QRCodes
首页
指南
演示
API
基准测试
首页
指南
演示
API
基准测试

快速开始

本指南将帮助你在 5 分钟内开始使用 QRCode。

浏览器环境（纯 JS）

1. 安装

npm
yarn
pnpm
bun
npm install @veaba/qrcode-js

2. 基础使用

import { QRCode, QRErrorCorrectLevel } from '@veaba/qrcode-js';

// 创建 QRCode 实例
const qr = new QRCode('https://github.com/veaba/qrcodes', QRErrorCorrectLevel.H);

// 获取 SVG 字符串
const svg = qr.toSVG();

// 插入到页面
document.getElementById('qrcode').innerHTML = svg;

3. 在框架中使用

React
Vue
import { useMemo } from 'react';
import { QRCode, QRErrorCorrectLevel } from '@veaba/qrcode-js';

function QRCodeComponent({ text, size = 256 }) {
  const svg = useMemo(() => {
    const qr = new QRCode(text, QRErrorCorrectLevel.H);
    return qr.toSVG(size);
  }, [text, size]);

  return <div dangerouslySetInnerHTML={{ __html: svg }} />;
}

浏览器环境（WASM）

1. 安装

npm
yarn
pnpm
bun
npm install @veaba/qrcode-wasm

2. 基础使用

import init, { QRCodeWasm } from '@veaba/qrcode-wasm';

// 初始化 WASM（只需一次）
await init();

// 创建 QRCode 实例
const qr = new QRCodeWasm();

// 生成 QRCode
qr.make_code('https://github.com/veaba/qrcodes');

// 获取 SVG 字符串
const svg = qr.get_svg();

// 插入到页面
document.getElementById('qrcode').innerHTML = svg;

Node.js 环境

1. 安装

npm install @veaba/qrcode-node

2. 基础使用

import { QRCode, QRErrorCorrectLevel } from '@veaba/qrcode-node';
import fs from 'fs';

// 创建 QRCode
const qr = new QRCode('https://example.com', QRErrorCorrectLevel.H);

// 获取 SVG
const svg = qr.toSVG();
fs.writeFileSync('qrcode.svg', svg);

// 获取 PNG Buffer
const pngBuffer = qr.toPNG(256);
fs.writeFileSync('qrcode.png', pngBuffer);

3. Express 示例

import express from 'express';
import { QRCode, QRErrorCorrectLevel } from '@veaba/qrcode-node';

const app = express();

app.get('/qrcode', (req, res) => {
  const { text = 'https://example.com', size = 256 } = req.query;

  const qr = new QRCode(text, QRErrorCorrectLevel.H);
  const svg = qr.toStyledSVG({ size: parseInt(size) });

  res.setHeader('Content-Type', 'image/svg+xml');
  res.send(svg);
});

app.listen(3000);

Bun 环境

1. 安装

bun add @veaba/qrcode-bun

2. 基础使用

import { QRCode, QRErrorCorrectLevel } from '@veaba/qrcode-bun';

// Bun 的 API 与 Node.js 版本一致
const qr = new QRCode('https://example.com', QRErrorCorrectLevel.H);

// 获取 SVG
const svg = qr.toSVG();
console.log(svg);

// 批量生成（Bun 的并发性能更优）
const texts = Array.from({ length: 1000 }, (_, i) => `https://example.com/${i}`);
const results = texts.map((t) => {
  const q = new QRCode(t, QRErrorCorrectLevel.H);
  return q.toSVG();
});

Rust 环境

1. 添加依赖

[dependencies]
qrcode-rust = { git = "https://github.com/veaba/qrcodes" }

2. 基础使用

use qrcode_rust::{QRCode, QRErrorCorrectLevel};

fn main() {
    // 创建 QRCode
    let mut qr = QRCode::new("https://example.com");
    qr.options.correct_level = QRErrorCorrectLevel::H;

    // 获取 SVG
    let svg = qr.get_svg();
    println!("{}", svg);

    // 保存到文件
    std::fs::write("qrcode.svg", svg).expect("Failed to write file");
}

3. 验证生成的 SVG

cd bench/rust-tools
cargo run --release --features validation --bin veaba-qr -- "https://example.com"

# 输出：
# 📦 @veaba/qrcode-rust
# ⏱️  生成耗时: ~66µs
# 🔍 验证中...
# ✅ 验证通过！

样式化 QRCode

所有包都支持样式化输出：

import { QRCode, QRErrorCorrectLevel } from '@veaba/qrcode-js';
// 或 Node.js: import { QRCode } from '@veaba/qrcode-node';
// 或 Bun: import { QRCode } from '@veaba/qrcode-bun';

const qr = new QRCode('https://example.com', QRErrorCorrectLevel.H);

// 样式化 SVG
const styledSvg = qr.toStyledSVG({
  size: 256,
  colorDark: '#000000',
  colorLight: '#ffffff',
  borderRadius: 8,
  quietZone: 2,
});

// 渐变 QRCode
const gradientSvg = qr.toStyledSVG({
  size: 256,
  gradient: {
    color1: '#667eea',
    color2: '#764ba2',
  },
});

批量生成

import { QRCode, QRErrorCorrectLevel } from '@veaba/qrcode-js';
// 或 Node.js/Bun 环境

const texts = ['https://example.com/1', 'https://example.com/2', 'https://example.com/3'];

// 批量生成
const svgs = texts.map((text) => {
  const qr = new QRCode(text, QRErrorCorrectLevel.H);
  return qr.toSVG(256);
});

性能对比

各运行时的性能对比（单条生成，ops/s）：

包 性能 适用场景
@veaba/qrcode-rust 54,283 ops/s 极致性能
@veaba/qrcode-bun 18,902 ops/s Bun 后端
@veaba/qrcode-node 12,078 ops/s Node.js 后端
@veaba/qrcode-js 9,662 ops/s 浏览器

下一步

ON THIS PAGE