目录

在我的博客文章页下方有一个分享按钮,点击就会生成一个二维码,可以使用手机扫描查看和分享。生成二维码的过程还是比较复杂的,完全靠自己手写的话还是不太现实,最方便的就是使用其他人写的 JS 库。生成二维码的 JS 库还是比较多的,我的需求就是不需要依赖 jQuery 之类的库,可以直接下载文件调用,也可以使用 npm 安装。

QRious 是一个生成二维码的 JS 库,它基本符合我的要求,可以直接下载 JS 文件,在 HTML 中直接引入调用,也可以通过 npm 安装,方便打包。QRious 也不需要依赖 jQuery ,使用也比较简单。下面简单写一下 QRious 库的使用。

Github:https://github.com/neocotic/qrious

安装

在 Github 的 README 区域提供了 JS 文件下载,包括 Development Version 未压缩的开发板和 Production Version 压缩过的用于生产环境的版本,下载后可以直接在 HTML 中引入 JS 文件。

也可以通过 npm 安装:

npm install --save qrious

使用 bower 安装:

bower install --save qrious

生成二维码

QRious 使用 canvas 生成二维码,需要一个 canvas 标签:

<canvas id="qr"></canvas>

最简单的生成二维码:

var qr = new QRious({
  element: document.querySelector('#qr'),
  value: 'https://www.misterma.com',
});

element 就是 canvas 元素,value 就是生成二维码的文本内容,默认会生成一个 100px * 100px 的二维码。

传入更多参数:

var qr = new QRious({
  element: document.querySelector('#qr'),
  value: 'https://www.misterma.com',
  size: 200,
  foreground: '#000000',
  background: '#8080FF',
});

生成的二维码如下:

QRious生成的二维码

下面是参数说明:

参数类型说明默认值
backgroundString背景颜色白色
elementElementcanvas 元素
foregroundString前景色黑色
levelString纠错级别(L, M, Q, H)L
mimeString图像类型image/png
paddingNumber二维码的 padding 值,单位为 px0
sizeNumber二维码的大小,单位为 px100
valueString二维码的内容''

以上就是 QRious 的使用说明,因为 QRious 使用比较简单,所以内容也比较少。

版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/886/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年10月18日 ©著作权归作者所有

发表评论

正在加载 Emoji

仅有一条评论

  1. 赞!前排混个脸熟,博客真好看😊