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

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

Info

Publication number
CN107729004A
CN107729004A CN201710942039.9A CN201710942039A CN107729004A CN 107729004 A CN107729004 A CN 107729004A CN 201710942039 A CN201710942039 A CN 201710942039A CN 107729004 A CN107729004 A CN 107729004A
Authority
CN
China
Prior art keywords
javascript
quick response
response code
method based
generation method
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201710942039.9A
Other languages
English (en)
Inventor
陈柏全
范渊
吴永越
郑学新
刘韬
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Chengdu DBAPPSecurity Co Ltd
Original Assignee
Chengdu DBAPPSecurity Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Chengdu DBAPPSecurity Co Ltd filed Critical Chengdu DBAPPSecurity Co Ltd
Priority to CN201710942039.9A priority Critical patent/CN107729004A/zh
Publication of CN107729004A publication Critical patent/CN107729004A/zh
Pending legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • G06F9/44505Configuring for program initiating, e.g. using registry, configuration files

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

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中的一种。
CN201710942039.9A 2017-10-11 2017-10-11 一种基于javascript的二维码生成方法 Pending CN107729004A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710942039.9A CN107729004A (zh) 2017-10-11 2017-10-11 一种基于javascript的二维码生成方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710942039.9A CN107729004A (zh) 2017-10-11 2017-10-11 一种基于javascript的二维码生成方法

Publications (1)

Publication Number Publication Date
CN107729004A true CN107729004A (zh) 2018-02-23

Family

ID=61210844

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710942039.9A Pending CN107729004A (zh) 2017-10-11 2017-10-11 一种基于javascript的二维码生成方法

Country Status (1)

Country Link
CN (1) CN107729004A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111813438A (zh) * 2020-07-16 2020-10-23 成都安恒信息技术有限公司 一种基于JavaScript的跨平台应用打包方法

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2002197364A (ja) * 2000-12-27 2002-07-12 Dentsu Tec Inc マーケティング方法及び記録媒体
CN103902711A (zh) * 2014-04-01 2014-07-02 深圳市茁壮网络股份有限公司 一种将二维码图片嵌入网页的方法和***

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2002197364A (ja) * 2000-12-27 2002-07-12 Dentsu Tec Inc マーケティング方法及び記録媒体
CN103902711A (zh) * 2014-04-01 2014-07-02 深圳市茁壮网络股份有限公司 一种将二维码图片嵌入网页的方法和***

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
洒满阳光的午后: ""使用JavaScript生成二维码"", 《 HTTPS://BLOG.CSDN.NET/SINAT_32582203/ARTICLE/DETAILS/73611502》 *

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111813438A (zh) * 2020-07-16 2020-10-23 成都安恒信息技术有限公司 一种基于JavaScript的跨平台应用打包方法
CN111813438B (zh) * 2020-07-16 2023-08-22 成都安恒信息技术有限公司 一种基于JavaScript的跨平台应用打包方法

Similar Documents

Publication Publication Date Title
JP7093387B2 (ja) スプレッドシートに基づくソフトウェアアプリケーション開発
US20190236118A1 (en) Filtered stylesheets
CN111259303B (zh) 一种web信息***前端页面自动生成的***及其方法
JP7153725B2 (ja) スプレッドシートに基づくソフトウェアアプリケーションの開発
CN107885848B (zh) 基于web技术的网页截屏方法
US20140237341A1 (en) System and method for creating integrated web form and database applications
GB2555157A (en) Selective sharing for collaborative application usage
CN107357817A (zh) 一种面向json的网页模块化设计及其异步加载方法
CN102981853B (zh) 一种通过网页的文本输入框提交长文本的方法和装置
CN115982266A (zh) 基于自定义配置属性字段的页面动态渲染方法及***
CN107729004A (zh) 一种基于javascript的二维码生成方法
CN111783007B (zh) 一种显示渲染方法、装置、电子设备及存储介质
CN102981852B (zh) 长文本提交方法和装置
JP4890051B2 (ja) ブラウザ画面の表示装置およびそのためのプログラム
CN110245341B (zh) 标识码批量生成方法及装置
US20050234838A1 (en) Method and apparatus for providing in place editing within static documents
CN106682228B (zh) 一种可视化动态绘制机柜排列的方法和装置
CN102637290A (zh) 一种基于浏览器的作业***及编辑方法
US20170031884A1 (en) Automated dependency management based on page components
JP5579086B2 (ja) チェックシート登録システム
KR101231329B1 (ko) 모바일 환경에서의 웹 데이터 추출을 위한 시스템
US11726780B1 (en) System and methods for application programming interface reference documentation updater
EP3015977A1 (en) Rendering a user interface
Vigo et al. Automatic device-tailored evaluation of mobile web guidelines
RAMESH et al. Web Technology

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20180223