CN107729004A - 一种基于javascript的二维码生成方法 - Google Patents

Abstract

本发明公开了一种基于javascript的二维码生成方法，包括利用javascript从浏览器页面获取生成二维码所需要的相关配置信息；利用javascript将数据编码成二进制序列，并利用javascript在浏览器页面创建DIV容器；利用javascript将二进制序列转成div小块放入DIV容器中。本发明的有益效果是：本发明能够实现在没有网络连接的离线状态下根据用户的需要在浏览器页面生成二维码，其具有使用简单、二维码创建速度快、适用范围广的优点，能够降低生成二维码所需的专业水平，有利于减少生成二维码所需的成本。

Description

一种基于javascript的二维码生成方法

技术领域

本发明涉及计算机技术领域，具体的说，是一种基于javascript的二维码生成方法。

背景技术

目前，二维码已经深入人们的生活，通过二维码传递信息，方便快捷。但是现在网页上的二维码都是提前生成成图片，然后通过图片方式再展示在客户端。这样的方式对于需要临时生成二维码的需求来说太过麻烦，并且还受到客户端是否缓存图片、服务器端通信是否顺畅等因素的制约，一旦用户想在离线状态下临时生成二维码，则无法满足。

JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。

Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作，JavaScript都可直接对这些事件给出相应的响应。

发明内容

本发明的目的在于提供一种能够在没有网络的离线状态、便于实时创建二维码的基于javascript的二维码生成方法。

本发明通过下述技术方案实现：一种基于javascript的二维码生成方法，包括利用javascript从浏览器页面获取生成二维码所需要的相关配置信息；利用javascript将数据编码成二进制序列，并利用javascript在浏览器页面创建DIV容器；利用javascript将二进制序列转成div小块放入DIV容器中。利用javascript能够在离线的状态实现数据的输入、读取与处理，从而实现在离线状态，对生成二维码所需要的相关配置信息进行处理后生成相应的二维码。JavaScript具有跨平台、容易上手、使用简单的优点，使得在离线状态创建二维码简单容易。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提上机器上的浏览器支持JavaScript脚本语言，而目前JavaScript已被大多数的浏览器所支持。因而本方案适用范围广、适应性强，便于推广使用。

所述的配置信息包括待编码的码字数据、二维码的版本和二维码的容错率。

包括以下几个步骤：

步骤S1：通过javascript在浏览器页面创建DOM节点，所述的DOM节点包括3个input节点和1个button节点，为button节点注册点击事件并绑定回调函数，通过3个input节点分别输入待编码的码字数据、二维码的版本和二维码的容错率，点击button节点进行提交请求；

步骤S2：用户点击button节点后，执行回调函数，javascript获取通过input节点输入的配置信息；

步骤S3：根据二维码的版本确定二维码的码元数目，根据码元数目确定二维码宽度，二维码宽度确定之后，利用javascript根据二维码宽度在浏览器页面创建1个DIV容器；

步骤S4：根据二维码的编码原理，利用javascript将待编码的码字数据编码成二进制序列；

步骤S5：利用javascript将二进制序列全部转成码元，二进制序列转成的码元数量与步骤S3中的码元数目相同；

步骤S6：利用javascript将步骤S5中二进制序列转成的码元按顺序填充至步骤S3创建的DIV容器中而生成二维码。

所述的步骤S2中，将javascript获取input节点中的配置信息并保存至变量。以此便于后期对配置信息方便读取调用，避免重复输入。

所述的步骤S3中，所述的码元为宽度大于或等于1px的正方形点。

所述的步骤S5中，二进制序列中的1对应一种颜色的码元，二进制序列中的0对应另一种颜色的码元。

所述的二维码的版本包括版本1到版本40中的任意一种。所述的版本1有21×21个码元，从版本1开始到版本40，每一个版本都是在前一个版本的基础上使纵向和横向各自增加4个码元。

所述的二维码的容错率采用级别L、级别M、级别Q、级别H中的一种。

本发明与现有技术相比，具有以下优点及有益效果：

本发明能够实现在没有网络连接的离线状态下根据用户的需要在浏览器页面生成二维码，其具有使用简单、二维码创建速度快、适用范围广的优点，能够降低生成二维码所需的专业水平，有利于减少生成二维码所需的成本。

附图说明

图1为实施例3的流程示意图。

具体实施方式

下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。

实施例1：

一种基于javascript的二维码生成方法，包括利用javascript从浏览器页面获取生成二维码所需要的相关配置信息；利用javascript将数据编码成二进制序列，并利用javascript在浏览器页面创建DIV容器；利用javascript将二进制序列转成div小块放入DIV容器中。利用javascript能够在离线的状态实现数据的输入、读取与处理，从而实现在离线状态，对生成二维码所需要的相关配置信息进行处理后生成相应的二维码。JavaScript具有跨平台、容易上手、使用简单的优点，使得在离线状态创建二维码简单容易。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提上机器上的浏览器支持JavaScript脚本语言，而目前JavaScript已被大多数的浏览器所支持。因而本方案适用范围广、适应性强，便于推广使用。

实施例2：

在上述实施例的基础上，本实施例中，所述的配置信息包括待编码的码字数据、二维码的版本和二维码的容错率。待编码的码字数据指的是扫描二维码后能够获取的信息。现有技术条件下，二维码的版本一共有版本1到版本40等40个版本，其中版本1有21×21个码元，从版本1开始到版本40，每一个版本都是在前一个版本的基础上使纵向和横向各自增加4个码元。例如，版本2有25×25个码元，版本40有177×177个码元。

二维码的容错率指的是二维码具有“纠错功能”。即使编码变脏或破损，也能够自动恢复数据。这一“纠错能力”具备级别L、级别M、级别Q、级别H等4个级别，用户可根据使用环境选择相应的级别。调高级别，纠错能力也相应提高，但由于数据量会随之增加，编码尺寸也会变大。

用户应综合考虑使用环境、编码尺寸等因素后选择相应的级别。在工厂等容易沾染赃物的环境下，可以选择级别Q或H，在不那么脏的环境下，且数据量较多的时候，也可以选择级别L。级别L对应的纠错率为7％，级别M对应的纠错率为15％，级别Q对应的纠错率为25％，级别H对应的纠错率为30％。一般情况下用户大多选择级别M。所述的纠错率为能够纠错的码字与全部码字的比率。其中全部码字为能够纠错的码字与待编码的码字数据之和。本实施例中，其他未描述的部分与上述实施例的内容相同，故不赘述。

实施例3：

如图1所示，在上述实施例的基础上，本实施例中，基于javascript的二维码生成方法包括以下几个步骤：

步骤S1：通过javascript在浏览器页面创建DOM节点，所述的DOM节点包括3个input节点和1个button节点，为button节点注册点击事件并绑定回调函数，利用javascript本身的功能即可实现在浏览器页面对DOM节点的创建，通过3个input节点分别输入待编码的码字数据、二维码的版本和二维码的容错率，点击button节点进行提交请求。

步骤S1的部分代码如下：

步骤S2：用户点击button节点后，执行回调函数，javascript获取通过input节点输入的配置信息。

步骤S2的部分代码如下：

步骤S3：根据二维码的版本确定二维码的码元数目，根据码元数目确定二维码宽度，二维码宽度确定之后，利用javascript根据二维码宽度在浏览器页面创建1个DIV容器。

步骤S3的部分代码如下：

步骤S4：根据二维码的编码原理，利用javascript将待编码的码字数据编码成二进制序列。所述的编码原理指的是在一个矩形空间通过黑、白像素在矩阵中的不同分布进行编码。在矩阵相应元素位置上，用点的出现表示二进制“1”，点的不出现表示二进制的“0”，点的排列组合确定了矩阵式二维条码所代表的意义。矩阵式二维条码是建立在计算机图像处理技术、组合编码原理等基础上的一种新型图形符号自动识读处理码制。其中，所述的点为方点、圆点或其他形状。本实施例中，所述的编码原理为现有技术条件下的公知常识以及惯用手段，此处不对齐具体内容进行赘述。

步骤S4的部分代码如下：

步骤S5：利用javascript将二进制序列全部转成码元，二进制序列转成的码元的数量与步骤S3中的码元数目相同，二进制序列转成的码元与步骤S3中的码元数目相同。二进制中只有1和0两种数字，其中1与0所转化成的码元为不同的码元以便于进行区分。

步骤S5的部分代码如下：

步骤S6：利用javascript将步骤S5中二进制序列转成的码元按顺序填充至步骤S3创建的DIV容器中而生成二维码。

步骤S6的部分代码如下：

本实施例中，所述的回调函数的内容就包括步骤S2～S6的内容。本实施例中，其他未描述的部分与上述实施例的内容相同，故不赘述。

实施例4：

在上述实施例的基础上，本实施例中，根据用户的具体需要选择纠错的级别，javascript根据纠错的级别与待编码的码字数据来确认最终的全部码字，再将全部码字编码成二进制序列。本实施例中，其他未描述的部分与上述实施例的内容相同，故不赘述。

实施例5：

在上述实施例的基础上，本实施例中，所述的步骤S2中，将javascript获取input节点中的配置信息并保存至变量。本实施例中，所述的变量指的是表示可变状态、具有存储空间的抽象，通过将配置信息保存至变量中即实现了对配置信息的储存，以此便于后期对配置信息方便读取调用，避免重复输入。本实施例中，其他未描述的部分与上述实施例的内容相同，故不赘述。

实施例6：

在上述实施例的基础上，本实施例中，所述的步骤S3中，所述的码元为宽度大于或等于1px的正方形点。所述的px为像素单位，码元的宽度值越大，最终生成的二维码图像尺寸相应的也越大。此处用户根据具体的需要进行设计和选择。对于码元宽度的确认通过编程的方式实现。本实施例中，其他未描述的部分与上述实施例的内容相同，故不赘述。

实施例7：

在上述实施例的基础上，本实施例中，所述的步骤S5中，二进制序列中的1对应一种颜色的码元，二进制序列中的0对应另一种颜色的码元。现有技术条件下，一般采用1对应黑色，0对应白色。本实施例中，其他未描述的部分与上述实施例的内容相同，故不赘述。

以上所述，仅是本发明的较佳实施例，并非对本发明做任何形式上的限制，凡是依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化，均落入本发明的保护范围之内。

Claims (8)

1.一种基于javascript的二维码生成方法，其特征在于：包括利用javascript从浏览器页面获取生成二维码所需要的相关配置信息；利用javascript将数据编码成二进制序列，并利用javascript在浏览器页面创建DIV容器；利用javascript将二进制序列转成div小块放入DIV容器中。

2.根据权利要求1所述的一种基于javascript的二维码生成方法，其特征在于：所述的配置信息包括待编码的码字数据、二维码的版本和二维码的容错率。

3.根据权利要求2所述的一种基于javascript的二维码生成方法，其特征在于：包括以下几个步骤：

步骤S1：通过javascript在浏览器页面创建DOM节点，所述的DOM节点包括3个input节点和1个button节点，为button节点注册点击事件并绑定回调函数，通过3个input节点分别输入待编码的码字数据、二维码的版本和二维码的容错率，点击button节点进行提交请求；

步骤S2：用户点击button节点后，执行回调函数，javascript获取通过input节点输入的配置信息；

步骤S3：根据二维码的版本确定二维码的码元数目，根据码元数目确定二维码宽度，二维码宽度确定之后，利用javascript根据二维码宽度在浏览器页面创建1个DIV容器；

步骤S4：根据二维码的编码原理，利用javascript将待编码的码字数据编码成二进制序列；

步骤S5：利用javascript将二进制序列全部转成码元，二进制序列转成的码元数量与步骤S3中的码元数目相同；

步骤S6：利用javascript将步骤S5中二进制序列转成的码元按顺序填充至步骤S3创建的DIV容器中而生成二维码。

4.根据权利要求3所述的一种基于javascript的二维码生成方法，其特征在于：所述的步骤S2中，将javascript获取input节点中的配置信息并保存至变量。

5.根据权利要求3所述的一种基于javascript的二维码生成方法，其特征在于：所述的步骤S3中，所述的码元为宽度大于或等于1px的正方形点。

6.根据权利要求3所述的一种基于javascript的二维码生成方法，其特征在于：所述的步骤S5中，二进制序列中的“1”对应一种颜色的码元，二进制序列中的“0”对应另一种颜色的码元。

7.根据权利要求2、3、4、5、6中任一项所述的一种基于javascript的二维码生成方法，其特征在于：所述的二维码的版本包括版本1到版本40中的任意一种。

8.根据权利要求7所述的一种基于javascript的二维码生成方法，其特征在于：所述的二维码的容错率采用级别L、级别M、级别Q、级别H中的一种。