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