4種方法生成二維碼（js 控制canvas 畫出二維碼）

時間 2019-11-13

原文原文鏈接

隨着網絡的迅速發展發展發展，二維碼的應用將會愈來愈多。同時不少只是很平凡的二維碼，請拿起你的手把這個二維碼設計起來吧。下面分享了幾個很是好的二維碼設計。javascript

二維碼原理：php

二維條碼/二維碼能夠分爲堆疊式/行排式二維條碼和矩陣式二維條碼。堆疊式/行排式二維條碼形態上是由多行短截的一維5條碼堆疊而成；矩陣式二維條碼以矩陣的形式組成，在矩陣相應元素位置上用「點」表示二進制「1」，用「空」表示二進制「0」，「點」和「空」的排列組成代碼。html

最近對二維碼產生了興趣研究了一下二維碼這裏生出的術語 qrcode 容錯性較高。java

數據表示方法	深色模塊表示二進制「1」，淺色模塊表示二進制「0」。
糾錯能力	· L級：約可糾錯7%的數據碼字
	· M級：約可糾錯15%的數據碼字
	· Q級：約可糾錯25%的數據碼字
	· H級：約可糾錯30%的數據碼字

上面的設計就很完美的利用了 qrcode的容錯性，很是nice 也很是有創意！！web

1.google 接口canvas

<?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>