qrcode-base64

English | 简体中文

在线演示 →

生成 base64 编码的二维码，不依赖 canvas，零运行时依赖。可用于 Vue2 / Vue3 / React / 微信小程序 / Node / 浏览器等。

drawImg(text) 返回 data:image/png;base64,... 字符串，直接给 <image> / <img> 当 src 用。

安装

npm install qrcode-base64

使用

import QR from 'qrcode-base64';
// 或：import { drawImg } from 'qrcode-base64'  →  drawImg(...)

const url = QR.drawImg('github.com/pudon', { size: 500 });

// 也可以只传一个 options 对象，内容写在 text 里：
const url2 = QR.drawImg({
  text: 'github.com/pudon',
  size: 500
});

CommonJS：

const QR = require('qrcode-base64');

const url = QR.drawImg('github.com/pudon', { size: 500 });

UMD，全局名 QRCode：

<script src="https://unpkg.com/qrcode-base64/dist/qrcode-base64.umd.js"></script>
<script>
  const url = QRCode.drawImg('Hello', { size: 300 });
</script>

参数

| 字段 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | text | string | — | 编码内容，支持中文 / Emoji（UTF-8）。只在单参形式 drawImg(options) 下生效，drawImg(text, options) 形式下以第一个参数为准、忽略此字段 | | typeNumber | number | 4 | QR 版本号 1–40，决定模块数（版本 × 4 + 17）与容量。装不下会自动升级，一般不用设 | | errorCorrectLevel | 'L' \| 'M' \| 'Q' \| 'H' | 'M' | 纠错等级 | | size | number | 500 | 图片边长（px），目标值，见下 | | colorDark | string | '#000000' | 码点颜色，#RRGGBB 或 #RGB | | colorLight | string | '#ffffff' | 背景色，格式同上 |

typeNumber 是格子数，size 是像素数，两者无关。

size 的实际取值

每个模块必须占整数像素。带小数时定位图形的 1:1:3:1:1 会被舍入扭曲，扫码器由它反推网格时逐模块漂移，密集内容下错误率可达 20%，超出纠错能力，结果是扫不出来。

所以 size 是目标值，实际边长为 模块数 × cellsize，其中 cellsize = max(2, round(size / 模块数))：

QR.drawImg('github.com/pudon', { size: 500 })   →   33 模块 × 15px = 495px
QR.drawImg('文'.repeat(240), { size: 170 })     →  105 模块 ×  2px = 210px

需要精确尺寸就用 CSS 控制显示大小。图片里码点铺满，不含静区（quiet zone），需要静区在外层加 padding + 背景色。

内容越长模块数越多，所需尺寸也越大。想要每模块 k 像素就取 size ≥ 模块数 × k，k 建议 3 以上。

TypeScript

内置类型声明，无需额外安装 @types。

import QR, { type DrawImgOptions } from 'qrcode-base64';

const opts: DrawImgOptions = { size: 500, errorCorrectLevel: 'H', colorDark: '#c0392b' };
const url: string = QR.drawImg('github.com/pudon', opts);