4种方法生成二维码 （js 控制canvas 画出 二维码）

时间：2022-11-19 07:52:21

随着网络的迅速发展 发展 发展，二维码的应用将会越来越多。同时很多只是很平凡的二维码，请拿起你的手 把这个二维码 设计起来吧。下面分享了几个非常好的二维码设计。

 二维码原理：

二维条码/二维码可以分为堆叠式/行排式二维条码和矩阵式二维条码。 堆叠式/行排式二维条码形态上是由多行短截的一维5条码堆叠而成；矩阵式二维条码以矩阵的形式组成，在矩阵相应元素位置上用“点”表示二进制“1”， 用“空”表示二进制“0”，“点”和“空”的排列组成代码。

最近对二维码产生了兴趣 研究了一下二维码 这里生出的术语 qrcode  容错性较高。

数据表示方法
深色模块表示二进制“1”，浅色模块表示二进制“0”。
纠错能力
· L级：约可纠错7%的数据码字
· M级：约可纠错15%的数据码字
· Q级：约可纠错25%的数据码字
· H级：约可纠错30%的数据码字

4种方法生成二维码 （js 控制canvas 画出 二维码）4种方法生成二维码 （js 控制canvas 画出 二维码）4种方法生成二维码 （js 控制canvas 画出 二维码）4种方法生成二维码 （js 控制canvas 画出 二维码）4种方法生成二维码 （js 控制canvas 画出 二维码）

4种方法生成二维码 （js 控制canvas 画出 二维码）4种方法生成二维码 （js 控制canvas 画出 二维码）4种方法生成二维码 （js 控制canvas 画出 二维码）4种方法生成二维码 （js 控制canvas 画出 二维码）4种方法生成二维码 （js 控制canvas 画出 二维码）

上面的设计 就很完美的利用了 qrcode的容错性，非常nice  也非常有创意！！

1.google 接口

<?php
               $urlToEncode="http://www.csd2n.net";//要生成二维码的网址
               generateQRfromGoogle($urlToEncode);
               function generateQRfromGoogle($chl,$widhtHeight ='150',$EC_level='L',$margin='0')
               {
               $url = urlencode($url);
               echo '<img src="http://chart.apis.google.com/chart?chs='.$widhtHeight.'x'.$widhtHeight.'&cht=qr&chld='.$EC_level.'|'.$margin.'&chl='.$chl.'" alt="QR code" widhtHeight="'.$size.'" widhtHeight="'.$size.'"/>';//Google API接口，若失效可到Google网址查询最新接口
               }
               ?>

　　

2..js代码 转换为 canvas （重点） 
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/142/gjxgxu0g/qrgen.min.js"></script>
               <div id=qrcode></div>
               <script type="text/javascript">
               qrcode(document.getElementById('qrcode'),{
                   data:'http://geraldl.net'
               });
               </script>

　　

3. 图片接口 
<img src="http://qrcoder.sinaapp.com?t=hello world">

　　

4.demo 里面http://hxend.com/jsqrcode/test/ 代码 
<!doctype html>
<html>
	<head>
		<title>QRCode</title>
		<script type="text/javascript" src="http://files.cnblogs.com/webers/qrcode-light.js"></script>
		<script type="text/javascript" src="http://files.cnblogs.com/webers/qrgen.js"></script>
	</head>
	<body>
		<div>
			<h1>二维码生成</h1>
			<div>
				图片: <img id=qrimg src=http://hdimg.qiniudn.com/Uploads/141889425189.png>
				<label><input id=qrclearedges type=checkbox checked>清理边缘</label>
			</div>
			<div><input id=fimg type=file></div>
			<div>文本: <textarea id=qrtext>http://www.btgoogle.com</textarea></div>
			<div>大小: <input id=cellSize type=range min=2 max=10 value=6></div>
			<table>
				<tr>
					<td rowspan=2>效果:</td>
					<td colspan=3><input id=cellEffect type=range min=-50 max=50 step=5 value=0></td>
				</tr>
				<tr id=cellEffectStops>
					<td align=left><a href=# data=l>液体</a></td>
					<td align=center><a href=# data=s>方块</a></td>
					<td align=right><a href=# data=r>圆</a></td>
				</tr>
			</table>
			<div>
				Foreground color: <input id=colorFore type=color value=#4169e1>
				Background color: <input id=colorBack type=color value=#ffffff><br>
				Outside-border color: <input id=colorOut type=color value=#cd5c5c>
				Inside-border color: <input id=colorIn type=color value=#191970>
			</div>
			<button id=qrgen>生成</button> 
		</div>
		<div id=qrcode></div>
		<script src="http://files.cnblogs.com/webers/take.js"></script>
	</body>
</html>

　　看在我写这么好的demo  和 分享这么好的二维码设计 给我一个推荐吧。该demo github:https://github.com/Hxend/jsqrcode

版权归博客园和石头所有 ，转载请注明出处。方便更新 
www.cnblogs.com/webers

 

标签：

相关文章