Javascript生成二维码

Javascript生成二维码

引言

现实生活中无处不充斥着使用二维码的场景,最常见的场景即我们平日里收/付款使用的二维码。当我们想要购买某样东西的时候拿出自己手机扫一扫别人的二维码,填入相应的密码就能把快捷的把钱发出去,它极大的方便的我们人类的日常生活,使我们不得不感叹科技的进步如此之快,因为些年我们还只能使用现金进行交易,如今却能直接使用手机扫一扫就交易了。那么真的是科技进步了么?我们不得不提出这样一个疑问,因为我本身是做技术的,自己对长年累月的对某些事情比较较劲和认真,所以我不由得来思考这样一个问题,顺便就此打算深入浅出的学习一下二维码,记录一下自己对二维码的学习过程和心得。前些日子由于项目中需要使用到二维码以及方便后续开发其他的功能,故学习了一下二维码。

二维码概览

二维码也称为二维条码,是指在一维条码的基础上扩展出另一维具有可读性的条码,使用黑白矩形图案表示二进制数据,被设备扫描后可获取其中所包含的信息。一维条码的宽度记载着数据,而其长度没有记载数据。二维码的长度、宽度均记载着数据。二维码有一维条码没有的“定位点”和“容错机制”。容错机制在即使没有识别到全部的条码、或是说条码有污损时,也可以正确地还原条码上的信息。

”二维码“ 我们从字面意思上即可得知它是由 “二维” 和 “码” 组成得。”二维“ 很好理解,我们小学就知道了:在一个平面上的内容就是二维,它只有前后、左右这两个方向,不存在上下之分。

同时补记维度一下的意义:

零维(奇异点)、一维(长度)、二维(长度和宽度)、三维(长度、宽度和高度)、四维(长度、宽度、高度和时间)、五维(无数个四维空间根据某一轴线集合而成)、六维(接纳任何可能的形状,而且都与自身的世界相一致)、七维(所有的点即无上限点上产生无限个时间线)、八维(X维物体的长)、Y维(物体的宽)、Z维(物体的高)、时间维、重力维、电磁力维、万有引力维、万有斥力维) 和九维(九维空间则是八维空间的弯曲)。

同样 ”码“ 也很容易理解,联想到我们平日里的小暗号即可得知。比如:给你一个眼神,你自己去体会;又比如:ASCLL,MD5,SHA1等码;还比如二战时期的无线电通信中使用的摩斯密码。我总结了一句话,概括来讲 ”码“ 的含义,码即是 ”某种数据对应另一种数据关系的集合的表示“ 。

二维码的种类有很多,不同的机构开发出的二维码具有不同的结构以及编写、读取方法。常见的二维码有:PDF417码QR码汉信码颜色条码EZ码Aztec码QuickMark 和 Data Matrix

这篇文章主要是讲 QR 码,QR 码( Quick Response Code)即快速响应矩阵图码,它于1994年由日本的 DENSO WAVE 公司发明,QR码比普通一维条码具有快速读取和更大的存储数据容量,无需像一维条码再扫描式需要直线对准扫描仪,所以它很快就被运用于各类生活场景之类,QR码使用四种标准化编码模式(数字、字母数字、字节(二进制)和日文(Shift_JIS))来存储数据。

由上可得知我们的二维码是什么了,简单来说即是在二维单位中记载着数据,我认为它实际上就是一种数据加密技术。它的存在可以让我们在支付时的扫一扫只用输入一下密码我们的交易就完成了。下面我放了一张二维码的图片,来仔细观察一下:

1_wxpay.png

我并不是在暗示什么,只是想吃个

仔细观察我们可以得知,这个二维码是由一些看似杂乱无序的黑/白色正方形小点和黑/白色长方形长线构成的。为了能让计算机读懂,我们的黑色方块代表1,白色方块代表0。

二维码一共有40个尺寸,官方把不同尺寸的二维码称为Version N。Version 1是21 x 21的矩阵,Version 2是 25 x 25的矩阵,Version 3是29的尺寸,每增加一个version,就会增加4的尺寸,公式是:(V-1)*4 + 21(V是版本号) 最高Version 40,(40-1)*4+21 = 177,所以最高是177 x 177 的正方形。那么很显然我这个尺寸就是 Version 5了,下面我用线条描绘出来了。

2_wxipaybit.png

由这些不同的二进制的0和1我们就能组合成不同的信息了,但你自己再仔细看就会发现没这么简单。下面来讲一下详细说明:

定位图案:

我们可以看到在这个二维码的左、右前角和左后角分别有三个相同的 ”回“ 字图形组成,这三个相同的图形被统一称为定位标记,它们的作用是用来使读码机进行正确的识别和解读,它的存在使得任何刁钻的角度扫描都是可以正确识别的,因为它可以自动矫正,只要右下角没方块就对了。

对齐图案:

只有Version 2以上(包括Version2)的二维码需要这个东西,同样是为了定位用的。

定位图案分割器:

这个是定位图案的白边,也是用于定位图案的。

时序信息:

也是用于定位的。原因是二维码有40种尺寸,尺寸过大了后需要有根标准线,不然扫描的时候可能会扫歪了。

格式信息:

QR码的格式信息记录了两种数据:纠错等级和掩码的类型。掩码的作用是为了对数据区域进行掩模以利于扫描仪识别,可以避免数据区域出现连续的空白或者连续的黑色区,同时也避免了数据区出现类似定位点样式的正方形出现。掩模图案在整个数据区域的网格内不断重复进行掩模计算(功能图形不进行掩模),数据区上对应掩模黑色模块的单元将会反转。每个二维码上会有两组相同的格式信息出现,并且带有有BCH纠错。

版本信息:

 在 >= Version 7以上,需要预留两块3 x 6的区域存放一些版本信息。

3_wxpaydetail.png

除了上述的那些用于定位、存放版本信息和格式化数据地方,剩下的地方都存放着 Data Code 数据码 和 Error Correction Code 纠错码。

以上就是 QR 码的简单介绍了,但是它远不止这么简单,它最厉害的部分是即便有一部分数据吗或者纠错码被遮挡住了,依然可以正确的扫描出出来。比如我上面的那张二维码中间有只企鹅遮挡住了相应的二维码。那么它为什么还能正确识别呢?这就要提到它的容错能力了:

QR 码有容错能力,QR 码图形如果有破损,仍然可以被机器读取内容,最高可以到30%面积破损仍可被读取。相对而言,容错率愈高,QR码图形面积愈大,为了提高效率、方便印刷和看起来美观,一般折中只使用15%容错能力。

容错能力一共分为了四个等级,分别是:L ( 7%的字码可被修正 )、M( 15%的字码可被修正 )、Q( 25%的字码可被修正 )和 H( 30%的字码可被修正 )。

考虑到目前自身基础知识还不够扎实和能力还不够,我怕接着写下去容易出错,所以关于二维码更多详细的内容我也就不写,如果想看二维码生成细节和原理,建议看这篇文章:。二维码生成细节和原理 

【 Javascript 生成二维码

我这里使用的是 EasyQRCodeJS ,当然你也可以使用其他的库来生成二维码。

我们从官方库拉取取文件到本地之后,为了方便演示,我新建一个 HTML 文件并导入我们的 easy.qrcode.js 文件,然后我们开始编写我们的演示代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>javascript 生成二维码</title>
</head>
<body>
	<main>
		<article>
			<section>
				<span>姓名:</span>
				<input type="text" id="getUsername" placeholder="Your name" />
				<input type="button" id="generateQrCode" value="生成">
				<span id="setTips"></span>
			</section>
			<section>
				<span>生成的二维码:</span>
				<div id="setQrCode"></div>
			</section>
		</article>
	</main>
	<script src="./easy.qrcode.min.js"></script>
	<script>
		/********************************************************************************* 
		*Copyright(P), Person 
		*FileName: index.html 
		*Author: N != Null 
		*Version: null 
		*Date: 2020/05/17 周日
		*Description:  简单的二维码验证的生成
		**********************************************************************************/  
		//正则表达式检验姓名
		function checkUsername(getUsername){
			reg = /^[^x00-xff]{2,5}$/;
			//进行验证
			if(reg.test(getUsername)){
				document.getElementById("setTips").style.color = "green";
				document.getElementById("setTips").innerHTML = "right";
				return true;
			}else{
				document.getElementById("setTips").style.color = "red";
				document.getElementById("setTips").innerHTML = "请输入正确的姓名格式并且姓名的取值范围为[2,5]";
				return false;
			}
		}
		//生成简单的二维码
		function generateSimpleQrCode(getUsername){
			new QRCode(document.getElementById("setQrCode"), {
				text: getUsername
			});
		}
		//监听点击鼠标事件
		document.getElementById("generateQrCode").addEventListener('mousedown',function(){
			document.getElementById("setQrCode").innerHTML = "";
			const getUsername = document.getElementById("getUsername").value;
			//正则表达式验证姓名
			if(!checkUsername(getUsername)){
				return false;
			}
			//生成简单的二维码
			generateSimpleQrCode(getUsername);
		});
	</script>
</body>
</html>

编写完成后我们来放上测试图:

4_generateQrCodeSuccess.png

5_generateQrCodeFail.png

演示就到这里啦,有兴趣的话可以修改我的代码,或者是给图片上个背景什么的,比如我下面的:

6_example.png

完结

撒花~~*★,°*:.☆( ̄▽ ̄)/$:*.°★* 。


回复列表



回复操作

正在加载验证码......

请先拖动验证码到相应位置

发布时间:2020-05-16 23:18:02

修改时间:2020-05-17 16:54:31

查看次数:160

评论次数:0