利用JS生成自己的个性二维码
- 2019 年 10 月 7 日
- 笔记
- 先了解下什么是二维码
二维码又称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>
运行结果:
