Qrious二维码插件的使用

1.1 Qrious插件简介

二维码我们并不陌生，二维码又称QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。

Qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码，你可以控制二维码的尺寸颜色，还可以将生成的二维码进行Base64编码。Qrious生成的二维码本质上就是一个超链接，而扫描二维码本质上就是在扫描完成后请求二维码中的连接达到访问效果；

1.2 Qrious插件的下载

1.2.1 官网下载

目前Qrious插件已经被托管至Github，我们可以在Github上进行下载：

Qrious的Github官网：https://github.com/neocotic/qrious

  • 下载：

项目中如何生成二维码？2分钟玩转Qrious验证码插件！_前端插件

  • 解压：

解压Qrious-master压缩包，进入dist目录，找到qrious.js（没压缩）或qrious.min.js（压缩的）；

项目中如何生成二维码？2分钟玩转Qrious验证码插件！_前端插件_02

1.2.2 使用npm下载

新建一个文件夹workspace（文件夹名称随意），进入cmd输入命令：

node -v   			# 检查node环境

npm install qrious

项目中如何生成二维码？2分钟玩转Qrious验证码插件！_Qrious_03

安装完毕：

项目中如何生成二维码？2分钟玩转Qrious验证码插件！_插件_04

进入node_modules目录：

项目中如何生成二维码？2分钟玩转Qrious验证码插件！_前端插件_05

1.2.3 云盘下载

如果你访问Github速度很慢，又没有下载node环境，那么我也帮你放到云盘了：

  • 百度云盘：

1.3 Qrious插件的使用

注意

1.3.1 Qrious插件的参数

参数

类型

默认值

描述

background

String

'white'

二维码的背景颜色

foreground

String

'black'

二维码的前景色

level

String

'L'

二维码的误差级别（L,M,Q,H）

mime

String

'image/png'

二维码输出为图片时的MIME类型

size

Number

100

二维码的大小，单位为像素

value

String

''

二维码的链接地址

1.3.2 Qrious插件的使用案例

  • 示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/qrious.js"></script>
</head>
<body>
<div style="text-align: center">
    <h3>51CTO: </h3>
    <img id="twoCode" />
</div>
</body>
<script>
    $(function () {
        var code=new QRious({
            background: '#64e761',
            foreground: '#2ac2d2',
            element:document.getElementById("twoCode"),
            size:150,
            level:'H',
            value:'https://blog.51cto.com/lscl'
        });
    });
</script>
</body>
</html>

最终效果：

项目中如何生成二维码？2分钟玩转Qrious验证码插件！_插件_06

使用微信扫描之后的效果：

项目中如何生成二维码？2分钟玩转Qrious验证码插件！_前端插件_07