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

  • 先了解下什么是二维码

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

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

  • 为什么二维码这么流行,有什么优势?
  1. 信息容量大, 可以容纳多达1850个大写字母或2710个数字或500多个汉字。
  2. 应用范围广, 支持文字,声音,图片,指纹等等...
  3. 容错能力强, 即使图片出现部分破损也能使用。
  4. 译码可靠性高。
  5. 可引入加密措施。
  6. 成本低, 容易制作。
  • 二维码容错级别

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

容错的原理是二维码在编码过程中进行了冗余,就像是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>

运行结果:

原文发布于微信公众号 - 框架师(mohu121)

原文发表时间:2019-09-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券