轉自：http://www.cnblogs.com/webers/p/4172313.html
隨着網絡的迅速發展 發展 發展，二維碼的應用將會越來越多。同時很多只是很平凡的二維碼，請拿起你的手 把這個二維碼 設計起來吧。下面分享了幾個非常好的二維碼設計。
二維碼原理：
二維條碼/二維碼可以分為堆疊式/行排式二維條碼和矩陣式二維條碼。 堆疊式/行排式二維條碼形態上是由多行短截的一維5條碼堆疊而成；矩陣式二維條碼以矩陣的形式組成，在矩陣相應元素位置上用“點”表示二進制“1”， 用“空”表示二進制“0”，“點”和“空”的排列組成代碼。
最近對二維碼產生了興趣 研究了一下二維碼 這里生出的術語 qrcode 容錯性較高。
|
數據表示方法
|
深色模塊表示二進制“1”，淺色模塊表示二進制“0”。
|
|
糾錯能力
|
· L級：約可糾錯7%的數據碼字
|
|
· M級：約可糾錯15%的數據碼字
|
|
|
· Q級：約可糾錯25%的數據碼字
|
|
|
· H級：約可糾錯30%的數據碼字
|
上面的設計 就很完美的利用了 qrcode的容錯性，非常nice 也非常有創意！！
1.google 接口
|
1
2
3
4
5
6
7
8
9
|
<?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 （重點）
|
1
2
3
4
5
6
7
|
<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/ 代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!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