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

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

二维码原理：

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

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

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

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 （重点）

demo: http://hxend.com/jsqrcode/test/

<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. 图片接口

1	`<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>

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

相关推荐

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