QRCodes

    快速开始

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

    浏览器环境（纯 JS）

    1. 安装

    npm
    yarn
    pnpm
    bun
    deno
    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
    deno
    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);
});

    性能对比

    ⚠️ 下表各运行时数字来自不同的基准测试，输入文本与测量口径并不统一， 因此不能直接横向比较，仅用于了解各自量级。权威的 Rust 三方对照见 benchmark_speedup_verified.json。

    包参考性能数据来源适用场景
    @veaba/qrcode-fast18.5-64.4 µs / 条benchmark_speedup_verified.json极致性能
    @veaba/qrcode-rust32.1-130.2 µs / 条benchmark_speedup_verified.json功能完整
    @veaba/qrcode-bun未统一测量—Bun 后端
    @veaba/qrcode-node未统一测量—Node.js 后端
    @veaba/qrcode-js未统一测量—浏览器

    下一步