分享一个在线二维码生成器(基于qrcode.js开发)

简介: 一种二维码扫描与生成的工具, 它可生成个性化二维码, 支持文本、网址、图片、短信、电话等格式及主题,提供融合码功能

一种二维码扫描与生成的工具, 它可生成个性化二维码, 支持文本、网址、图片、短信、电话等格式及主题,提供融合码功能

演示地址

https://qrcode.gitapp.cn

关键代码

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "",
    width: 288,
    height: 288,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
});

// 调用
qrcode.makeCode(content); // make another code.

二维码知识

二维码(QR code)是一种用于快速读取和存储信息的矩阵式二维码符号。它是由日本Denso公司于1994年9月研制的一种条码技术,具有高效、可靠、灵活和广泛等特点。
二维码由一些黑色和白色的小方块组成,这些方块按照特定的规则排列。通过使用不同的黑白方块组合,可以编码各种类型的数据,包括文本、URL、电话号码、电子邮件地址、图片、视频等。 使用二维码可以方便地将信息传输到其他设备或与互联网连接的设备上。例如,您可以将二维码保存到手机相册中,然后使用手机应用程序扫描该二维码,以访问链接、下载文件、获取信息等。 由于二维码的灵活性和普遍性,它们已经广泛应用于各种领域,如商业、医疗保健、教育、物流、娱乐等。


二维码的生成原理涉及到编码过程和纠错码的生成。以下是基本的步骤:

1.数据编码:首先,需要将需要存储的数据转换为二进制码。这个过程可以通过将数据转换为ASCII码,然后再将ASCII码转换为二进制码实现。

2.生成纠错码:为了提高二维码的识别率,需要为每个字符生成一组纠错码。纠错码的作用是检测和修正错误,通常采用的是Reed-Solomon编码。这种算法可以检测并修正一定数量的错误,从而确保二维码的可靠性。

3.模块排列:将数据和纠错码按照一定的规则排列到二维码矩阵中。具体的排列方式取决于二维码的类型和版本。


QR码支持如下的编码:

Numeric mode 数字编码,从0到9。如果需要编码的数字的个数不是3的倍数,那么,最后剩下的1或2位数会被转成4或7bits,则其它的每3位数字会被编成 10,12,14bits,编成多长还要看二维码的尺寸

Alphanumeric mode 字符编码。包括 0-9,大写的A到Z(没有小写),以及符号$ % * + – . / : 包括空格。这些字符会映射成一个字符索引表。如下所示:(其中的SP是空格,Char是字符,Value是其索引值) 编码的过程是把字符两两分组,然后转成下表的45进制,然后转成11bits的二进制,如果最后有一个落单的,那就转成6bits的二进制。而编码模式和字符的个数需要根据不同的Version尺寸编成9, 11或13个二进制

参考github

https://github.com/davidshimjs/qrcodejs

目录
相关文章
|
15天前
|
监控 JavaScript 前端开发
使用Vue.js开发员工上网行为监控的实时数据展示页面
使用Vue.js开发的实时员工上网行为监控页面,展示员工访问的网站、应用和时间等数据。页面响应式设计,适应不同设备。通过Vue组件显示实时数据,如`<li v-for="activity in activities">`循环渲染。数据定时更新,利用Vue的生命周期钩子和axios从服务器获取并自动刷新,确保数据的时效性。该页面有助于管理者即时了解员工网络活动,保障企业网络安全和资源管理。
75 5
|
5天前
|
缓存 JavaScript 前端开发
js开发代码片段与小技巧
js开发代码片段与小技巧
|
9天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
12天前
|
缓存 编解码 JavaScript
在JavaScript小游戏开发中,优化游戏性能是非常重要的
【6月更文挑战第16天】JavaScript小游戏性能优化涉及动画流畅度和减少重绘:使用requestAnimationFrame替代定时器;减少DOM操作,利用DocumentFragment或虚拟DOM;Canvas/WebGL高效渲染;压缩图像,使用雪碧图;分层渲染与视口裁剪;Web Workers处理后台计算;缓存计算结果;事件委托;定期性能分析。优化是持续过程,需结合具体需求调整。
46 8
|
12天前
|
JavaScript 前端开发 Android开发
kotlin开发 webview如何在收到JS调用后,native返回数据给到JS
这段内容描述了在Hybrid App开发中,使用Kotlin的Compose构建的Web视图(WebView)如何通过JsBridge实现JavaScript与原生代码的交互
|
15天前
|
JavaScript 前端开发 编译器
探讨TypeScript如何帮助JavaScript开发者避免这些常见错误,从而提高代码质量和开发效率
【6月更文挑战第13天】TypeScript,JavaScript的超集,通过添加静态类型检查和面向对象特性,帮助开发者避免常见错误,提升代码质量和开发效率。它能检测类型错误,防止运行时类型转变引发的问题;使用可选链和空值合并避免引用错误;通过枚举减少逻辑错误中的魔法数字;接口和泛型等特性提高代码可维护性。学习TypeScript对提升JavaScript开发质量有显著效果。
25 4
|
1天前
|
JavaScript 前端开发 网络协议
如何快速搭建一个 Node.JS 项目并进入开发?
如何快速搭建一个 Node.JS 项目并进入开发?
|
23天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的文化遗产的保护与旅游开发附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的文化遗产的保护与旅游开发附带文章和源代码部署视频讲解等
16 1
|
27天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的校园二手交易平台的设计与开发附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的校园二手交易平台的设计与开发附带文章和源代码设计说明文档ppt
42 2
|
28天前
|
存储 JavaScript 前端开发
Vue.js表单开发宝藏工具集,让构建表单变得轻松又酷炫!
Vue Tiny Validate 是最小的验证库,如果你只需要最基本的功能,它可以帮你减轻负担。
25 3