publish
npm version patch npm publish
带Logo的QR Code(二维码)生成工具
中文 | English
对node-qrcode的再封装,支持Logo,支持调整大小
一、支持列表
- 支持npm方式引用,
- 支持直接
<script>
方式引用 - 支持vue
- 支持react
- 支持IE9+
- 等
二、使用方法:
npm
:
1.npm i --save qr-code-with-logo
const myCanvas = documentdocument0 QrCodeWithLogo
<script>
标签形式, 点此处下载该文件
2. <!-- 有对 promise的依赖,如不考虑兼容,可尝试删除该依赖 --><!-- 将上方下载的文件放置于js文件夹下 -->
三、API
目前只能将QrCode转换成Canvas输出
QrCodeWithLogo
或者将QrCode转换成Image输出,不过它也是基于Canvas的
QrCodeWithLogo
其中toCanvas的参数为一个对象,它包含特有的属性 CanvasOptions,以及公共的属性 BaseOptions
toImage的参数同为一个对象,它包含特有的属性 ImageOptions,以及公共的属性 BaseOptions
1. CanvasOptions
canvas
Type: DOMElement
配置dom节点,只允许为<canvas>
,不可为<div>
等
2. ImageOptions
image
Type: DOMElement
可选的,配置dom节点,只允许为<image>
,不可为<div>
等
download
Type: boolean
Default: false
可选,为true的时候,以文件的形式输出
downloadName
Type: string
Default: qr-code.png
可选,下载时,图片的文件名
3. BaseOptions
content
Type: string
二维码的内容
width
Type: number
Default: 0
可选,二维码的宽度(默认会随二维码内容的长度自动调整大小)
logo
Type: string | Logo
Logo
为js对象
可选,可以为字符串(代表src),也可以为对象,其中Logo对象的具体属性有
-
src
Type:
string
Logo地址,(可以是远程的,也可以是本地的base64图片)当存在跨域时,该二维码(canvas)无法 toDataURL,亦无法使用JS转换成
image
-
crossOrigin
Type:
string
Default:'Anonymous'
可选,一般不必修改,默认为 'Anonymous'
-
logoRadius
Type:
number
可选,logo的 radius,如果配置了它,存在跨域时,Logo可能会加载失败
-
logoSize
Type:
number
Default:0.15
可选,logo的 大小,范围在
0-1
之间,代表logo在二维码中的比例 与borderSize
共同组成了 logo的大小,他们的关系相当于标准盒模型 -
borderRadius
Type:
number
Default:8
可选,logo的边框的 radius
-
borderSize
Type:
number
Default:0.05
可选,border的 大小,范围在
0-1
之间,代表border在二维码中的比例 与logoSize
共同组成了 logo的大小,他们的关系相当于标准盒模型 -
bgColor
Alias:
borderColor
Type:string
Default:'#ffffff'
可选,logo的背景色,可以为 'transparent'(透明)
nodeQrCodeOptions
Type: NodeQrCodeOptions
node-qrcode
的参数,参见
可选,本项目基于node-qrcode
,并对其配置参数兼容,其中常用参数的有
-
margin
Type:
number
Default:4
可选,二维码的外边框大小,单位是单块二维码的像素
-
color.dark
Type:
string
Default:'#000000ff'
RGBA, IE下仅支持RGB可选,二维码的前景色
-
color.light
Type:
string
Default:'#000000ff'
可选,二维码的背景色
四:其它
- 如果控制台报错
“Promise”未定义
添加如下代码即可if typeof windowPromise === 'undefined'windowPromise = Promise