跳到正文

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

名称类型默认值说明版本
valuestring''要编码的文本。未发布
sizenumber100二维码的宽高(px),不含 padding。未发布
paddingnumber | string12静区:px 或任意 CSS 长度。未发布
colorstringundefined模块颜色,默认取主题的墨色。未发布
backgroundColorstringundefined背景色,包括静区,默认取主题的浅色背景。未发布
errorCorrectionLevelL | M | Q | HM纠错等级。未发布
iconSrcstringundefined画在中间的图片地址。未发布
iconSizenumber40图标宽高(px)。未发布
iconBackgroundColorstringundefined图标底色,默认同背景色。未发布
iconBorderRadiusnumber4图标底色的圆角(px)。未发布
typesvg | canvassvg用 SVG 还是 canvas 位图渲染。未发布
aria-labelstringvalue图片的无障碍名称。未发布

默认 type 是 svg,颜色来自主题。编码器是 Project Nayuki 的 QR Code generator library(MIT),内置在源码里。