QrCode 二维码
QrCode 把一个字符串(通常是链接)生成二维码。默认用 SVG 绘制:任意缩放都清晰,可以在服务端渲染,颜色跟随主题。
演示
基础用法
对辅助技术来说,二维码是一张图片,默认用 value 作为它的名称;也可以传 aria-label 换一个描述。
尺寸
size 是二维码本身的宽度(px)。padding 是四周的静区,扫码器靠它找到边缘,至少保留两个模块宽。
颜色
color 和 backgroundColor 替换主题颜色。请保持浅色背景上的深色模块,并且对比度足够:很多扫码器读不了反色或低对比度的二维码。
纠错等级
errorCorrectionLevel 决定二维码被损坏或遮挡多少后仍能识别:L 约 7%,M 15%,Q 25%,H 30%。等级越高需要的模块越多,同一个值会更密。数据在同样尺寸下还放得下时,等级可能会被自动提高。
图标
iconSrc 在中间放一张图片,底下是 iconBackgroundColor(默认同背景色)的方块,圆角为 iconBorderRadius。图标会盖住部分模块,所以请用 errorCorrectionLevel="H",并让 iconSize 不超过 size 的四分之一左右。
渲染方式
type="canvas" 在挂载后绘制位图,而不是 SVG。canvas 在绘制时读取主题颜色,之后切换主题不会跟着变;如果在意,请传入 color 和 backgroundColor。
下载
canvas 可以用 toDataURL() 保存为 PNG。静区是元素的 padding,不在图片里。
主题
Brutal 用方角 2px 墨色边框框住静区。Elegant 浅色用细的圆角边框,颜色较淡。Elegant 深色仍然保持浅底深码:模块用页面底色,背景用文字色,二维码像一张浅色卡片放在深色页面上。反色(深底浅码)的二维码在深色界面里看起来更协调,但很多扫码器和手机相机识别不了。
QrCode Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
value | string | '' | 要编码的文本。 | 未发布 |
size | number | 100 | 二维码的宽高(px),不含 padding。 | 未发布 |
padding | number | string | 12 | 静区:px 或任意 CSS 长度。 | 未发布 |
color | string | undefined | 模块颜色,默认取主题的墨色。 | 未发布 |
backgroundColor | string | undefined | 背景色,包括静区,默认取主题的浅色背景。 | 未发布 |
errorCorrectionLevel | L | M | Q | H | M | 纠错等级。 | 未发布 |
iconSrc | string | undefined | 画在中间的图片地址。 | 未发布 |
iconSize | number | 40 | 图标宽高(px)。 | 未发布 |
iconBackgroundColor | string | undefined | 图标底色,默认同背景色。 | 未发布 |
iconBorderRadius | number | 4 | 图标底色的圆角(px)。 | 未发布 |
type | svg | canvas | svg | 用 SVG 还是 canvas 位图渲染。 | 未发布 |
aria-label | string | value | 图片的无障碍名称。 | 未发布 |
默认 type 是 svg,颜色来自主题。编码器是 Project Nayuki 的 QR Code generator library(MIT),内置在源码里。