---
url: /components/qrcode.md
---
# QRCode 二维码

纯 JS 编码（byte 模式 / M 级纠错 / 版本 1-10 自动选择，最长 214 字节，中文按 UTF-8 计），Canvas 高清渲染（devicePixelRatio 适配），无外部依赖、离线可用。

## 基础用法

## 自定义颜色与静区

`margin` 收窄四周静区；第二个示例深底反白，前景与背景需保持足够对比度，否则影响扫码识别：

## 输出尺寸

`size` 为画布输出尺寸（px），码点模块自动缩放并对齐像素边界，缩放不失真：

## 导出 PNG

通过 ref 调用 `toDataURL()` 拿到 PNG dataURL，可直接触发下载或回显：

## QRCode API

| 名称 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| value | String | — | 编码内容（超长时 console.error 并保持上次内容） |
| size | Number | `120` | 输出尺寸（px） |
| margin | Number | `4` | 静区（四周留白，模块数） |
| foreground | String | `#000000` | 前景色 |
| background | String | `#ffffff` | 背景色 |

暴露方法：`toDataURL()` 导出 PNG。底层编码器可独立引入：

```js
import { encodeQR } from '@wil-works/evoke-business-ui/dist/index.mjs'
// encodeQR(text, { maskId? }) → { matrix, version, size, maskId }
```