利用JS生成自己的个性二维码

框架师

发布于 2019-09-26 14:47:13

3K0

发布于 2019-09-26 14:47:13

先了解下什么是二维码

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

二维条码/二维码（2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。

为什么二维码这么流行,有什么优势?

信息容量大, 可以容纳多达1850个大写字母或2710个数字或500多个汉字。
应用范围广, 支持文字,声音,图片,指纹等等...
容错能力强, 即使图片出现部分破损也能使用。
译码可靠性高。
可引入加密措施。
成本低, 容易制作。

二维码容错级别

二维码是具有容错功能，当二维码图片被遮挡一部分后，仍可以扫描出来。

容错的原理是二维码在编码过程中进行了冗余，就像是123被编码成123123，这样只要扫描到一部分二维码图片，二维码内容还是可以被全部读到。

二维码容错率即是指二维码图标被遮挡多少后，仍可以被扫描出来的能力。容错率越高，则二维码图片能被遮挡的部分越多。

二维码容错率用字母表示，容错能力等级分为：L、M、Q、H四级：

等级	容错率	损毁?%仍然可以扫码
L级	低	7%
M级	中	15
Q级	四分之一	25%
H级	高	30%

大多数情况下，强烈建议采用30%的容错率。对此有平台做过各种型号手机的扫描测试。结果是:

对目前主流手机，在绝大多数扫描场景下，容错率越高，越容易被快速扫描!!!

如果需要对二维码进行设计，比如需要在二维码中间加logo则需要选择H级容错率的二维码。当然，高容错率的代价是图片的复杂度提高。在实际操作中应该根据需求选择相应的容错级别。

注意，二维码边上的三个定位框和中间定位小块不能被遮挡。否则容错率再高也无法扫描。

二维码生成插件qrious

下面用代码来实现一个自己的个性二维码,首先要知道js中有二维码生成插件,如qrious,zxing,今天使用的是qrious,qrious是一款基于HTML5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码，你可以控制二维码的尺寸颜色，还可以将生成的二维码进行Base64编码。qrious.js二维码插件的可用配置参数如下：

参数	类型	默认值	描述
element	dom	无	显示二维码容器
background	String	"white"	二维码的背景颜色。
foreground	String	"black"	二维码的前景颜色。
level	String	"L"	二维码的容错级别(L, M, Q, H)。
mime	String	"image/png"	二维码输出图片时的MIME类型。
size	Number	100	二维码的尺寸，单位像素。
value	String	无	二维码的值(请求URL)

IDEA中新建index.html页面，在页面引入【qrious.min.js】js文件,没有下载的小伙伴可以在这个网站下载

qrious下载地址:https://www.bootcdn.cn/qrious/

项目结构如下:

代码如下:

<html>
<head>
    <title> 推荐jQuery插件库网站 </title>
    <meta http-equiv="Content-Type"
          content="text/html;charset=UTF-8"/>
    <!--引入qrious.min.js文件-->
    <script src="qrious.min.js"></script>
</head>
<body>
<!--定义二维码生成容器-->
<img id="qrious"/>
<!--创建QRious函数,生成二维码-->
<script type="text/javascript">
    var qr = new QRious({
        // 二维码生成容器
        element : document.getElementById("qrious"),
        // 二维码大小
        size : 200,
        // 容错等级
        level : 'H',
        // 二维码颜色
        foreground :'red',
        // URL链接
        value : 'http://www.jq22.com/'
    });
</script>
</body>
</html>

运行结果: