QR码生成器 SDK

一个基于 qrcode 库封装的现代化、易用的二维码生成 SDK，提供简洁的 API 用于生成和下载二维码。

特性

• 🚀 现代化的 ES6+ API 设计
• 📱 支持多种输出格式（PNG、Canvas）
• 🎨 丰富的自定义选项（颜色、尺寸、纠错级别等）
• 💾 一键下载功能
• 📦 批量生成支持
• 🔧 便捷的静态方法
• 📖 完整的 TypeScript 类型支持（计划中）

安装

npm install

快速开始

基本用法

import QRGenerator from 'qrcode-sdk';

// 创建生成器实例
const qrGenerator = new QRGenerator();

// 生成二维码 DataURL
const dataURL = await qrGenerator.generateDataURL('Hello World');
console.log(dataURL);

// 渲染到 Canvas
const canvas = document.getElementById('myCanvas');
await qrGenerator.renderToCanvas('Hello World', canvas);

// 下载二维码
qrGenerator.download('my-qrcode', 'png');

便捷的静态方法

// 快速生成
const dataURL = await QRGenerator.quick.generate('Hello World');

// 快速生成并下载
await QRGenerator.quick.download('Hello World', 'my-qrcode');

API 文档

构造函数

const qrGenerator = new QRGenerator(options);

默认选项

{
  width: 256,           // 二维码宽度
  margin: 2,            // 边距
  color: {
    dark: '#000000',    // 前景色
    light: '#FFFFFF'    // 背景色
  },
  errorCorrectionLevel: 'M',  // 纠错级别 (L, M, Q, H)
  type: 'image/png',    // 输出类型
  quality: 0.92         // 图片质量
}

主要方法

renderToCanvas(text, canvas, options)

将二维码渲染到指定的 Canvas 元素。

• text (string): 要编码的文本内容
• canvas (HTMLCanvasElement): 目标 Canvas 元素
• options (Object, 可选): 自定义选项
• 返回: Promise<string> - 生成的 DataURL

const canvas = document.getElementById('qrCanvas');
const dataURL = await qrGenerator.renderToCanvas('https://example.com', canvas, {
  width: 300,
  color: { dark: '#FF0000', light: '#FFFFFF' }
});

generateDataURL(text, options)

生成二维码的 DataURL。

• text (string): 要编码的文本内容
• options (Object, 可选): 自定义选项
• 返回: Promise<string> - 生成的 DataURL

const dataURL = await qrGenerator.generateDataURL('Hello World', {
  width: 512,
  errorCorrectionLevel: 'H'
});

download(filename, format)

下载当前生成的二维码。

• filename (string, 默认: 'qrcode'): 文件名（不含扩展名）
• format (string, 默认: 'png'): 文件格式

// 先生成二维码
await qrGenerator.generateDataURL('Hello World');
// 然后下载
qrGenerator.download('my-qrcode', 'png');

generateBatch(items)

批量生成二维码。

• items (Array): 包含 {text, options} 对象的数组
• 返回: Promise<Array<string>> - DataURL 数组

const items = [
  { text: 'Hello World', options: { width: 200 } },
  { text: 'https://example.com', options: { color: { dark: '#FF0000' } } }
];

const dataURLs = await qrGenerator.generateBatch(items);

配置管理

getOptions()

获取当前默认配置。

const currentOptions = qrGenerator.getOptions();

updateOptions(options)

更新默认配置。

qrGenerator.updateOptions({
  width: 400,
  color: { dark: '#0066CC' }
});

静态方法

QRGenerator.quick.generate(text, options)

快速生成二维码 DataURL。

const dataURL = await QRGenerator.quick.generate('Hello World', {
  width: 300
});

QRGenerator.quick.download(text, filename, options)

快速生成并下载二维码。

await QRGenerator.quick.download('Hello World', 'my-qrcode', {
  width: 400,
  color: { dark: '#FF0000' }
});

示例

查看 example.html 文件获取完整的使用示例，包括：

• 基本二维码生成
• 自定义样式选项
• PNG格式下载
• 实时预览

在浏览器中打开 example.html 即可体验所有功能。

在Vue中使用

安装依赖

npm install

在Vue组件中使用

<template>
  <div>
    <input v-model="qrText" placeholder="输入要生成二维码的文本" />
    <button @click="generateQRCode">生成二维码</button>
    <canvas ref="qrCanvas" v-if="qrGenerated"></canvas>
    <button @click="downloadQRCode" v-if="qrGenerated">下载二维码</button>
  </div>
</template>

<script>
import QRGenerator from 'qrcode-sdk';

export default {
  name: 'QRCodeComponent',
  data() {
    return {
      qrText: 'https://example.com',
      qrGenerated: false,
      qrGenerator: null
    };
  },
  mounted() {
    // 创建QRGenerator实例
    this.qrGenerator = new QRGenerator({
      width: 256,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    });
  },
  methods: {
    async generateQRCode() {
      if (!this.qrText) return;
      
      try {
        const canvas = this.$refs.qrCanvas;
        await this.qrGenerator.renderToCanvas(this.qrText, canvas);
        this.qrGenerated = true;
      } catch (error) {
        console.error('生成二维码失败:', error);
      }
    },
    downloadQRCode() {
      this.qrGenerator.download('qrcode');
    }
  }
};
</script>

<style scoped>
input, button {
  margin: 10px;
  padding: 8px;
}

canvas {
  border: 1px solid #ccc;
  margin: 10px 0;
}
</style>

在Vue 3 Composition API中使用

<template>
  <div>
    <input v-model="qrText" placeholder="输入要生成二维码的文本" />
    <button @click="generateQRCode">生成二维码</button>
    <canvas ref="qrCanvas" v-if="qrGenerated"></canvas>
    <button @click="downloadQRCode" v-if="qrGenerated">下载二维码</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import QRGenerator from 'qrcode-sdk';

export default {
  name: 'QRCodeComponent',
  setup() {
    const qrText = ref('https://example.com');
    const qrGenerated = ref(false);
    const qrGenerator = ref(null);
    const qrCanvas = ref(null);

    onMounted(() => {
      // 创建QRGenerator实例
      qrGenerator.value = new QRGenerator({
        width: 256,
        margin: 2,
        color: {
          dark: '#000000',
          light: '#FFFFFF'
        }
      });
    });

    const generateQRCode = async () => {
      if (!qrText.value) return;
      
      try {
        await qrGenerator.value.renderToCanvas(qrText.value, qrCanvas.value);
        qrGenerated.value = true;
      } catch (error) {
        console.error('生成二维码失败:', error);
      }
    };

    const downloadQRCode = () => {
      qrGenerator.value.download('qrcode');
    };

    return {
      qrText,
      qrGenerated,
      qrCanvas,
      generateQRCode,
      downloadQRCode
    };
  }
};
</script>

<style scoped>
input, button {
  margin: 10px;
  padding: 8px;
}

canvas {
  border: 1px solid #ccc;
  margin: 10px 0;
}
</style>

构建

# 开发模式（监听文件变化）
npm run dev

# 生产构建
npm run build

# 启动本地服务器
npm run serve

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

更新日志

v1.0.0

• 初始版本发布
• 支持基本的二维码生成和下载功能
• 提供现代化的 API 设计
• 包含完整的使用示例