二维码 QRCode

QRCode 是一个基于 qrcode 的 React 二维码组件，支持多种渲染方式（canvas、img、svg），支持自定义颜色、尺寸、容错等级，并可以在二维码中间嵌入图标。

📦 引入方式

import { QRCode } from './QRCode';

---

🧩 使用示例

📚 基础用法

示例

源码

<QRCode value="https://example.com" size={200} />

---

📚 带图标的二维码

示例

源码

<QRCode value="https://example.com" size={200} level="H" icon="/img/docusaurus.png" iconSize={50} />

---

📚 SVG 渲染

示例

源码

<QRCode value="https://example.com" renderAs="svg" />

📚 带背景色和前景色

示例

源码

<QRCode value="https://example.com" fgColor="#333" bgColor="#f0f0f0" />

---

🧩 属性说明

属性	类型	默认值	描述
value	string	必填	要编码的字符串
size	number	160	二维码像素尺寸
level	'L' | 'M' | 'Q' | 'H'	'M'	容错等级
bgColor	string	'#fff'	背景色
fgColor	string	'#000'	前景色
renderAs	'canvas' | 'img' | 'svg'	'canvas'	渲染方式
includeMargin	boolean	false	是否包含外部白边
className	string	—	自定义 class
style	CSSProperties	—	内联样式
alt	string	'qrcode'	图片 alt
onLoad	() => void	—	渲染完成回调
icon	string | ReactNode	—	二维码中间图标
iconSize	number	size * 0.2	图标大小（像素）

---

🧩 方法说明（通过 ref 调用）

const qrRef = useRef<QRCodeRef>(null);

<QRCode ref={qrRef} value="https://example.com" />;

// 获取 DataURL
const dataUrl = await qrRef.current?.toDataURL();

// 下载二维码
await qrRef.current?.download('my-qrcode.png');

---

✨ 注意事项

• 1. 当使用 svg 渲染时，组件内部使用 Blob URL 临时生成 DataURL，并在卸载时释放。
• 2. 图标大小会根据容错等级自动限制最大占比，防止二维码无法识别。
• 3. 如果需要下载二维码，必须通过 ref 调用 download 方法。